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. ionic+vue+capacitor系列笔记--手机从安卓10升级到安卓11以后，之前的代码不管用了，无法跳转其他应用

    之前手机是安卓10版本,没什么问题,升级以后,手机出现了一些异常,发现原来代码里写的跳转功能,无法使用了哦~~脑壳痛 解决方案 本项目:build.gradle targetSdkVersion 30 ...

  2. 看不懂打我系列------图文并茂基于CentOS Linux release 7.8.2003 Core安装并Docker化你的Node.js应用

    @图文并茂基于CentOS Linux release 7.8.2003 Core安装并Docker化你的Node.js应用 简体中文 | English 说明 本文介绍如何在CentOS Linux ...

  3. 《HelloGitHub》第 82 期

    兴趣是最好的老师,HelloGitHub 让你对编程感兴趣! 简介 HelloGitHub 分享 GitHub 上有趣.入门级的开源项目. https://github.com/521xueweiha ...

  4. BBS登录与注册功能的总结

    BBS登录与注册功能的总结 一.表设计:表名 外键字段 表名 models.py from django.db import models from django.contrib.auth.model ...

  5. springboot项目中swagger配置

    1.导入依赖 查看代码 <dependency> <groupId>com.github.xiaoymin</groupId> <artifactId> ...

  6. Vue3源码阅读梳理

    简单代码例子 const { createApp, defineComponent, computed, watch, ref, reactive, effect } = Vue const app ...

  7. ResponseBodyAdvice处理返回数据

    package com.xf.config; import org.slf4j.MDC; import org.springframework.core.MethodParameter; import ...

  8. prometheus+grafana监控体验

    先上pom依赖 <dependency> <groupId>org.springframework.boot</groupId> <artifactId> ...

  9. PopClip使用教程图文详解 2022.12亲测有效

    PopClip简介 PopClip mac版是Macos上一款增强型复制粘贴工具,当你选中文字后,PopClip会自动弹出复制.剪切.粘贴.搜索等等操作,除了复制粘贴外,PopClip还提供了很多的扩 ...

  10. VS 管理控制台提示ScriptHalted

    一.结论 出现该问题是因为PowerShell 版本低的原因,按以下步骤操作即可 二.解决方案 1.下载最新PowerShell 安装程序包,根据系统找对应版本x86还是x64 https://www ...