• 售前

  • 售后

热门帖子
入门百科

Vue封装一个TodoList的案例与欣赏器当地缓存的应用实现

[复制链接]
123457898 显示全部楼层 发表于 2021-10-26 12:55:07 |阅读模式 打印 上一主题 下一主题
本文主要介绍了Vue封装一个TodoList的案例与欣赏器本地缓存的应用实现,分享给各人,具体如下:
  1. 使用Vue封装一个简易的Todolist的小案例. 同时加入了浏览器本地缓存的技术手段.
复制代码
欣赏器本地缓冲:
       
  • 前提: 一样平常我们界说的变量,大概用Vuex生存的数据, 当欣赏器举行了一个革新 那么这个数据就会丢失, 如许就做不出汗青记载的结果了, 但是, 使用欣赏器缓存就可以帮助我们解决这个问题…   
  • 欣赏器缓存分为二种 sessionStorage 和 localStorage, 二种原型链分别如下:



可以看得出, 他们的原型链上根本都是一样的, 唯一的区别在于,

       
  • localStorage 作用于本地缓存, 时间是持久的,除非手动去删除, 大概清空, 否则不停都存在欣赏器中   
  • sessionStorage 作用与会话缓存, 生命周期只存在于本次打开欣赏器会话, 当完成的关闭欣赏器,那么信息就会丢失, 而仅仅革新页面, 数据仍然生存。
本次实例,使用的是 sessionStorage, 并对此举行了一次小封装.
  1. const  storage = {
  2.         set(key, value){
  3.                 window.sessionStorage.setItem(key, JSON.stringify(value));
  4.         },
  5.         get(key){
  6.                 return JSON.parse(window.sessionStorage.getItem(key));
  7.         },
  8.         remove(key){
  9.                 window.sessionStorage.removeItem(key);
  10.         }
  11. }
  12. export default storage;
复制代码
实例代码:
  1. <template>
  2.         <div class="todo">
  3.                 <header>
  4.                         <input type="text" placeholder="输入..." v-model="keyword" @keydown.enter="handleList">
  5.                         TodoList
  6.                 </header>
  7.                 <!-- 正在进行 -->
  8.                 <h4>正在进行...{{dolistNumber}}</h4>
  9.                 <template v-for="(item, index) in dolist" :key="index">
  10.                         <div class="dolist" v-if="!item.checked">
  11.                                 <label :for="index +'l'">
  12.                                         <input type="checkbox" v-model="item.checked" :id="index +'l'" @change="handleChecked">
  13.                                         {{item.title}}
  14.                                 </label>
  15.                                 <span @click="cancalDo(index)">X</span>
  16.                         </div>
  17.                 </template>
  18.                 <!-- 已经完成 -->
  19.                 <h4>已经完成...{{dolist.length - dolistNumber}}</h4>
  20.                 <template v-for="(item, index) in dolist" :key="index">
  21.                         <div class="dolist" v-if="item.checked">
  22.                                 <label :for="index +'ll'">
  23.                                         <input type="checkbox" v-model="item.checked" :id="index +'ll'"  @change="handleChecked">
  24.                                         {{item.title}}
  25.                                 </label>
  26.                                 <span @click="cancalDo(index)">X</span>
  27.                         </div>
  28.                 </template>
  29.         </div>
  30. </template>
  31. <script>
  32.         import storage from '../storage.js';
  33.         export default {
  34.                 name: "todoList",
  35.                 data() {
  36.                         return {
  37.                                 keyword: "", //  输入的选项
  38.                                 dolist: [],
  39.                         }
  40.                 },
  41.                 computed:{
  42.                         dolistNumber(){
  43.                                 return this.dolist.filter(item => item.checked === false).length;
  44.                         }
  45.                 },
  46.                 methods: {
  47.                         handleChecked(){
  48.                                 //  当更改状态之后 重新刷新
  49.                                 storage.set('dolist', this.dolist);
  50.                         },
  51.                         handleList() {
  52.                                 if (this.keyword !== "") {
  53.                                         this.dolist.push({
  54.                                                 title: this.keyword,
  55.                                                 checked: false,
  56.                                         });
  57.                                         this.keyword = "";
  58.                                         storage.set('dolist', this.dolist);
  59.                                 }
  60.                                
  61.                         },
  62.                         cancalDo(index) {
  63.                                 // 删除这个
  64.                                 this.dolist.splice(index, 1);
  65.                                 storage.set('dolist', this.dolist);
  66.                         }
  67.                 },
  68.                 mounted(){
  69.                         let dolist = storage.get('dolist');
  70.                         if(dolist){
  71.                                 this.dolist = dolist;
  72.                         }
  73.                 },
  74.         }       
  75. </script>
  76. <style>
  77.         .todo {
  78.                 margin: 400px auto;
  79.                 min-height: 300px;
  80.                 width: 800px;
  81.                 background-color: #eee;
  82.         }
  83.         .todo header {
  84.                 position: relative;
  85.                 text-align: center;
  86.                 height: 60px;
  87.                 line-height: 60px;
  88.                 font-size: 20px;
  89.                 border-bottom: 2px solid #fff;
  90.         }
  91.         .todo header input {
  92.                 position: absolute;
  93.                 left: 40px;
  94.                 top: 50%;
  95.                 transform: translateY(-50%);
  96.                 outline: none;
  97.                 line-height: 30px;
  98.                 border-radius: 15px;
  99.                 padding-left: 30px;
  100.                 border: 1px solid #999;
  101.                 font-size: 16px;
  102.                 width: 100px;
  103.                 transition: all .6s linear;
  104.         }
  105.         .todo header input:focus {
  106.                 width: 200px;
  107.         }
  108.         .dolist {
  109.                 padding: 20px;
  110.                 font-size: 16px;
  111.         }
  112.         .dolist label {
  113.                 cursor: pointer;
  114.         }
  115.         .dolist input {
  116.                 margin-right: 10px;
  117.         }
  118.         .dolist span:last-child {
  119.                 float: right;
  120.                 border: 1px solid gray;
  121.                 background-color: #999;
  122.                 color: #fff;
  123.                 border-radius: 50%;
  124.                 padding: 5px;
  125.         }
  126.         h4 {
  127.                 padding-bottom: 20px;
  128.                 text-align: center;
  129.         }
  130. </style>
复制代码
到此这篇关于Vue封装一个TodoList的案例与欣赏器本地缓存的应用实现的文章就介绍到这了,更多干系Vue TodoList内容请搜索草根技术分享从前的文章或继承欣赏下面的干系文章盼望各人以后多多支持草根技术分享!

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x

帖子地址: 

回复

使用道具 举报

分享
推广
火星云矿 | 预约S19Pro,享500抵1000!
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

草根技术分享(草根吧)是全球知名中文IT技术交流平台,创建于2021年,包含原创博客、精品问答、职业培训、技术社区、资源下载等产品服务,提供原创、优质、完整内容的专业IT技术开发社区。
  • 官方手机版

  • 微信公众号

  • 商务合作