打卡ts day02--使用typescript 寫評論demo

demo.ts

// DataHelpler 類 用于操作localStorage
class DataHelpler {
  dataKey: string; //localstorage key
  primaryKey: string; // id

  constructor(dataKey: string, primaryKey: string) {
    this.dataKey = dataKey
    this.primaryKey = primaryKey
  }

  // [{content:'3333', id :1},{content:'3333', id :1}]
  // 讀取本地數據
  readData(): any {
    let pinglunStr: string | null = localStorage.getItem(this.dataKey)
    let pinglunArr: any = [];   // 這一定要給默認值
    if (pinglunStr) {
      pinglunArr = JSON.parse(pinglunStr)
    }
    return pinglunArr
  }

  // 存本地數據
  saveData(pinglunArr: object[] ): void {
    let pinglunStr: string = JSON.stringify(pinglunArr)
    localStorage.setItem(this.dataKey, pinglunStr)
  }

  // 新增本地數據
  add(pinglunValue: string): number {
    // 1.先取值
    let Data: any = this.readData()
    // 2.評論對象
    let obj:any = {
      content: pinglunValue
    }
    // 3.自動生成primaryKey  obj[this.primaryKey]
    // 拿到本地存儲中最后一個值的primaryKey   +1
    let newId: number = Data.length > 0 ? Data[Data.length -1][this.primaryKey] + 1 : 1;
    // 4. 將primaryKey 值 存到obj
    obj[this.primaryKey] = newId
    Data.push(obj)
    this.saveData(Data)
    return newId
  }

  // 刪除
  remove(ID: number | string): boolean {
    debugger
    // 1.先取值
    let Data: any = this.readData()
    // 2.遍歷Data
   let Index :number =  Data.findIndex((item:any) =>item[this.primaryKey] == ID)
    if(Index !== -1) {
      Data.splice(Index, 1)
      this.saveData(Data)
      return true
    }
    return false
  }
}

demo.html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<style>
  .neirong,
  .pinglun,
  .addpinglun {
    border: 1px solid #000;
  }
</style>

<body style="width:50%;margin: 10px auto">
  <div class="neirong">
    <p>文章內容哈哈哈哈紅紅火火恍恍惚惚紅紅火火恍恍惚惚紅紅火火恍恍惚惚</p>
  </div>
  <div class="pinglun">
    <ul id="ul">
      <!-- <li>評論1112323 <span style="float:right;margin-right:30px;">刪除</span> </li> -->
    </ul>
  </div>
  <div class="addpinglun">
    <textarea name="" id="textarea" cols="70" rows="10"></textarea>
    <button id="add">新增評論</button>
  </div>
</body>
<script src="./js/demo.js"></script>
<script>
  let dh = new DataHelpler('plData', 'id')


  window.onload = function () {
    init()
  }

  // 渲染評論列表
  function init() {
    let data = dh.readData()
    let str = ''
    if (data) {
      data.forEach(item => {
        str += `
          <li>${item.content} <span  data-id="${item.id}" onclick="del(this)" style="float:right;margin-right:30px;cursor:pointer;">刪除</span> </li>
        `
      });
    } else {
      str += `
        <li> 暫無數據 </li>
      `
    }
    document.querySelector('#ul').innerHTML = str
  }

  //  新增
  document.querySelector('#add').onclick = function () {
    dh.add(document.querySelector('#textarea').value)
    init()
    document.querySelector('#textarea').value = ''
  }

  // 刪除功能
  function del(element) {
    dh.remove(element.getAttribute("data-id"))
    init()
  }

</script>

</html>

效果圖

posted @ 2020-03-24 21:29 學習。。。閱讀(259) 評論(0) 收藏舉報

刷新頁面返回頂部

學習中。。。

打卡ts day02--使用typescript 寫評論demo

公告