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. 宝塔渗透之msf代理入侵

    前言 在渗透中遇到内网主机是一层接一层的拓扑形式,可以采用多层代理加路由转发访问,便于在渗透中出现网段隔绝可以使用此方法跳出局限 实验环境 kali: 192.168.75.131 target-ce ...

  2. 【转载】EXCEL VBA Workbook、Worksheet、Range的选择和操作

    Workbooks对象是Microsoft Excel 应用程序中当前打开的所有 Workbook 对象的集合.有close.add.open等方法.   Workbooks.close        ...

  3. Spark详解(03) - Spark3.0.0运行环境安装

    Spark详解(03) - Spark3.0.0运行环境安装 Spark运行模式 Spark常见部署模式: Local模式:在本地部署单个Spark服务 所谓的Local模式,就是不需要其他任何节点资 ...

  4. Go语言的赞和喷

    (原发于 GitHub Pages,2019-01-01 23:22:43) 2019 年,我回来了. 不知不觉中,我入 PHP 的坑已经 3 年有余,入 Go 的坑也大半年了.作为不评论不舒服斯基星 ...

  5. SSM框架——MyBatis

    Mybatis 1.Mybatis的使用 1.1给项目导入相关依赖 我这里有几个下载好的依赖包提供给大家 点我下载--junit4.13.2 点我下载--maven3.8.1 点我下载--mybati ...

  6. 「Python实用秘技12」像导入模块一样导入ipynb文件

    本文完整示例代码及文件已上传至我的Github仓库https://github.com/CNFeffery/PythonPracticalSkills 这是我的系列文章「Python实用秘技」的第12 ...

  7. lock 和 Monitor （转载）

    Lock和Monitor都是对被操作对象同步控制的方法 Lock 是 Monitor的简化版本,IL callvirt ...Monitor.Enter(object)...leave.s.... c ...

  8. MySQL优化六，锁

    一,MySQL中的锁 InnoDB中锁非常多,总的来说,可以如下分类: 这些锁都是做什么的?具体含义是什么?我们现在来一一学习. 1.2,解决并发事务问题 我们已经知道事务并发执行时可能带来的各种问题 ...

  9. freeswitch号码黑名单

    概述 freeswitch是一款简单好用的的VOIP开源软交换平台. 在客户的呼叫过程中,会遇到一些异常的号码,包括高投诉风险号码.敏感号码.特殊号码等. 在客户呼叫流程中,需要针对这些异常号码做呼叫 ...

  10. 定时调度插件------Quartz.NET（一）

    官网地址 https://www.quartz-scheduler.net/ 使用说明 dll引用 使用NuGet 搜索Quartz,作者为Marko Lahma, Quartz.NET为该插件 目前 ...