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>

效果图

打卡ts day02--使用typescript 写评论demo的更多相关文章

  1. 手写Spring+demo+思路

    我在学习Spring的时候,感觉Spring是很难的,通过学习后,发现Spring没有那么难,只有你去学习了,你才会发现,你才会进步 1.手写Spring思路: 分为配置.初始化.运行三个阶段如下图 ...

  2. 如何写好demo——学习感悟

    文章标题:教你如何写好Demo应用 如何制作出最有用的demo呢? 简,易 在demo中,我们要专注于单一的主题.我们的教学覆盖了很大的知识范围,因此,化整为零是非常必要的. 例如,我们要说明Andr ...

  3. [闲的蛋疼系列]从零开始用TypeScript写React的UI组件(0)-先写一个Button??

    0.咸鱼要说的 一入前端深似海,咸鱼入海更加咸. 最近闲的蛋疼,手上年前的事也完成了7788了,借助[PG1]的话来说,我们要keep real. 咸鱼肯定不real 了,因为我们都活在梦里,所以咱们 ...

  4. 使用Typescript写的Vue初学者Hello World实例(实现按需加载、跨域调试、await/async）

    万事开头难,一个好的Hello World程序可以节省我们好多的学习时间,帮助我们快速入门.Hello World程序之所以是入门必读必会,就是因为其代码量少,简单易懂.但我觉得,还应该做到功能丰富, ...

  5. 【TS】358- 浅析 TypeScript 设计模式

    点击上方"前端自习课"关注,学习起来~ 作者:DD菜 https://zhuanlan.zhihu.com/p/43283016 设计模式就是软件开发过程中形成的套路,就如同你在玩 ...

  6. 17、vue-cli3 js项目中引入ts混用（typeScript）

    说明: vue3.0搭建的项目,不过没有引入ts,后来需要用到一个插件是用ts写的,所以vue要用到ts... 一.安装typescript及loader npm install typescript ...

  7. Bestreviewapp给iOS软件写评论赚钱

    BestReviewApp 这是一个评论类的活动,网站上会提供App列表,在iTunes评论这些应用就能获得报酬.目前账号中的余额可通过PayPal或支付宝提取出来.BestReviewApp 开放的 ...

  8. hdoj_2546饭卡(强忍悲痛，好好写题解)

    Problem Description 电子科大本部食堂的饭卡有一种很诡异的设计,即在购买之前判断余额.如果购买一个商品之前,卡上的剩余金额大于或等于5元,就一定可以购买成功(即使购买后卡上余额为负) ...

  9. 【7-9 有重复的数据I (20 分)】【此题卡输入，需要自己写个输入挂】

    参考一个博客的输入挂,先挂在此处,以备以后使用. import java.io.*; import java.util.*; import java.math.*; public class Main ...

  10. vue ts ,vue使用typescript，三种组件传值方式

    参考链接:https://juejin.im/post/5c55156f6fb9a049ef270541

随机推荐

  1. [OpenCV实战]46 在OpenCV下应用图像强度变换实现图像对比度均衡

    本文主要介绍基于图像强度变换算法来实现图像对比度均衡.通过图像对比度均衡能够抑制图像中的无效信息,使图像转换为更符合计算机或人处理分析的形式,以提高图像的视觉价值和使用价值.本文主要通过OpenCV ...

  2. Zookeeper详解(02) - zookeeper安装部署-单机模式-集群模式

    Zookeeper详解(02) - zookeeper安装部署-单机模式-集群模式 安装包下载 官网首页:https://zookeeper.apache.org/ 历史版本下载地址:http://a ...

  3. 如何通过Java应用程序将Word转为Excel

    平时在工作中,很多小伙伴会习惯性地将文件保存为Word文档格式,但有时会发现某些文件如果保存成Excel表格可能会更好地呈现.例如有的文本在Word文本中不如在Excel工作表编辑计算方便,所以要把W ...

  4. 10分钟做好 Bootstrap Blazor 的表格组件导出 Excel/Word/Html/Pdf

    上篇: Bootstrap Blazor 实战 通用导入导出服务(Table组件) 1.新建工程 新建工程b14table dotnet new blazorserver -o b14table 将项 ...

  5. YMOI2019-5.4

    题解 YMOI2019-5.4 前言 欸,被干爆了.. 太菜了.亏我还提前看题了,还是自古大神出民间 YMOI2019的第二次考试吧.第一次没参加,这一次是第一次却出师不利..还要继续加强 还是总结一 ...

  6. java 进阶P-5.5+P-6.1

    框架加数据 以框架+数据来提高可扩展性 命令的解析是否可以脱离if-else 定义一个Handler来处理命令 用Hash表来保存命令和Handler之间的关系 抽象 Shape是什么形状 Shape ...

  7. StringBuilder类-toString方法

    StringBuilder类 构造方法 StringBuilder();创建一个空的字符串缓冲区对象StringBuilder(String s);根据传入的内容创建一个字符串缓冲区对象 成员方法 S ...

  8. 使用 NineData 实现备份集的实时查询

    使用 NineData 实现备份集的实时查询 背景信息 数据作为一家公司的重要资产,其重要程度不言而喻.数据库为数据提供存取服务,担任着重要的角色,如果因数据误删.服务器故障.病毒入侵等原因导致数据丢 ...

  9. 一文搞懂工作流审批（Java+activiti）快速开发+自定义工作流配置

    前言 activiti工作流引擎项目,企业erp.oa.hr.crm等企事业办公系统轻松落地,一套完整并且实际运用在多套项目中的案例,满足日常业务流程审批需求. 一.项目形式 springboot+v ...

  10. C++ 地球人口承载力

    题目描述 假设地球上的新生资源按恒定速度增长.照此测算,地球上现有资源加上新生资源可供 xx 亿人生活 aa 年,或供 yy 亿人生活 bb 年. 为了能够实现可持续发展,避免资源枯竭,地球最多能够养 ...