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. 操作系统linux

    Linux命令概览 一.哪些地方可以学到Linux? 1.Linux中国 Linux中国绝对是学习Linux的好去处,各种资讯.文章.技术都有,而且更新及时,质量也很高,学Linux一定要去看啊. 2 ...

  2. MATLAB实现随机森林（RF）回归与自变量影响程度分析

      本文介绍基于MATLAB,利用随机森林(RF)算法实现回归预测,以及自变量重要性排序的操作. 目录 1 分解代码 1.1 最优叶子节点数与树数确定 1.2 循环准备 1.3 数据划分 1.4 随机 ...

  3. 单细胞转录组实战01: CellRanger7定量

    安装CellRanger cd ~/APP wget -O cellranger-7.1.0.tar.xz "https://cf.10xgenomics.com/releases/cell ...

  4. 11月16日内容总结——OSI传输层之TCP与UDP协议、应用层简介、socket模块介绍及代码优化、半连接池的概念

    目录 一.传输层之TCP与UDP协议 1.TCP协议(重要) 三次握手建链接(白话版) 三次握手专业版 四次挥手断连接(白话版) 四次挥手专业版 2.UDP协议 3.tcp和udp的对比 二.应用层简 ...

  5. 《Terraform 101 从入门到实践》 Terraform在公有云GCP上的应用

    <Terraform 101 从入门到实践>这本小册在南瓜慢说官方网站和GitHub两个地方同步更新,书中的示例代码也是放在GitHub上,方便大家参考查看. Terraform支持的公有 ...

  6. P30_全局配置 - window - 下拉刷新

    window 全局开启下拉刷新功能 概念:下拉刷新是移动端的专有名词,指的是通过手指在屏幕上的下拉滑动操作,从而重新加载页面数据的行为. 设置步骤:app.json -> window -> ...

  7. SpringCloud Sleuth链路追踪

    1.概要 一般的,一个分布式服务跟踪系统,主要有三部分: 数据收集 数据存储 数据展示 然而这三个部分其实不都是由SpringCloud Sleuth(下面我简称为Sleuth)完成的,Sleuth负 ...

  8. rt-thread模糊到清晰系列: thread切换相关

    // 创建thread tid = rt_thread_create("main", main_thread_entry, RT_NULL, RT_MAIN_THREAD_STAC ...

  9. java基础（非常简单）

    java javaSE 注释: block块级 line 行 标识符和关键字 组成部分.变量名.类名.方法名--------标识符 $\数字._\字母 数据类型 强类型语言---安全性高--速度会慢 ...

  10. 【译】.NET 7 中的性能改进（三）

    原文 | Stephen Toub 翻译 | 郑子铭 PGO 我在我的 .NET 6 性能改进一文中写了关于配置文件引导优化 (profile-guided optimization) (PGO) 的 ...