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. CTFshow——funnyrsa1的wp理解

    题目如下: 题目分析: 拿到题,发现给的e不常规,p1和p2相等,有两个不同n,两个不同c和两个不同e.给定两个密文的情况下,通常需要找到两者之间存在的关系,"合并"密文求解才能得 ...

  2. JDBC的一些基础认识，写的不是特别完善，希望大家看的时候别太介意嘿嘿嘿

    JDBC 1,概念和本质 Java DataBase Connectivity Java 数据库链接, Java语言操作数据库 JDBC的本质:是一套操作所有关系型数据库的规则(接口)而JDBC所有的 ...

  3. Hadoop详解(08) - Hadoop企业优化方案.docx

    Hadoop详解(08) - Hadoop企业优化方案.docx MapReduce优化 MapReduce 跑的慢的原因 计算机性能:CPU.内存.磁盘健康.网络 I/O 操作优化 (1)数据倾斜 ...

  4. [Leetcode]设计循环队列

    题目   代码 class MyCircularQueue { public: /** Initialize your data structure here. Set the size of the ...

  5. YMOI 2019.6.8

    题解 YMOI 2019.6.8 前言 第二回考试,承让拿了第一次rank1,(●ˇ∀ˇ●) 题解 这次考试总体发挥比较好,每一道题都尽可能得取得了所能及的所有分.虽然多少还是有失误,不过在所难免.保 ...

  6. 【MySQL】MySQL8安装

    1. MySQL8安装 安装环境 操作系统:CentOS7 MySQL版本:8.0.28 安装方式:二进制Generic 软件路径:/app/database 数据路径:/data/3306 日志路径 ...

  7. 初始rust

    安装rust 访问rust 按照步骤操作即可,安装很慢,请耐心等待 安装成功之后,请注意在命令行测试 rustc --version,cargo --version看看输出版本信息是否正常,如果不正常 ...

  8. [Vue warn]: Invalid prop: type check failed for prop "model". Expected Object, got String with value ""

    问题描述: [Vue warn]: Invalid prop: type check failed for prop "model". Expected Object, got S ...

  9. 聊聊火热的 ChatGPT（我帮大伙问了几个比较关心的问题）

    如需要转载,请声明原文链接微信公众号「ENG八戒」https://mp.weixin.qq.com/s/L9tZy_KWnE1kf0E3HNhJhQ 本文大概 2562 个字,阅读需花 15 分钟 内 ...

  10. vuluhub_jangow-01-1.0.1

    前言 靶机:jangow-01-1.0.1 攻击机:kali linux2022.4 靶机描述 打靶ing 靶机探测 使用nmap扫描网段 点击查看代码 ┌──(root㉿kali)-[/home/k ...