1. //封装操作localstorage本地存储的方法 模块化的文件
  2.  
  3. // nodejs 基础
  4.  
  5. var storage={
  6.  
  7. set(key,value){
  8.  
  9. localStorage.setItem(key, JSON.stringify(value));
  10. },
  11. get(key){
  12.  
  13. return JSON.parse(localStorage.getItem(key));
  14. },remove(key){
  15. localStorage.removeItem(key);
  16. }
  17.  
  18. }
  19.  
  20. export default storage;
  1. <template>
  2.  
  3. <div id="app">
  4.  
  5. <input type="text" v-model='todo' @keydown="doAdd($event)" />
  6.  
  7. <hr>
  8. <br>
  9.  
  10. <h2>进行中</h2>
  11.  
  12. <ul>
  13.  
  14. <li v-for="(item,key) in list" v-if="!item.checked">
  15. <input type="checkbox" v-model="item.checked" @change="saveList()" /> {{item.title}} -- <button @click="removeData(key)">删除</button>
  16. </li>
  17. </ul>
  18.  
  19. <br>
  20. <br>
  21. <h2>已完成</h2>
  22.  
  23. <ul>
  24. <li v-for="(item,key) in list" v-if="item.checked">
  25. <input type="checkbox" v-model="item.checked" @change="saveList()" /> {{item.title}} -- <button @click="removeData(key)">删除</button>
  26. </li>
  27. </ul>
  28. </div>
  29. </template>
  30.  
  31. <script>
  32.  
  33. import storage from './model/storage.js';
  34.  
  35. // console.log(storage);
  36.  
  37. export default {
  38. data () {
  39. return {
  40.  
  41. todo:'' ,
  42. list: []
  43. }
  44. },
  45. methods:{
  46.  
  47. doAdd(e){
  48. // console.log(e);
  49. if(e.keyCode==13){
  50. this.list.push({
  51. title:this.todo,
  52. checked:false
  53. })
  54. }
  55.  
  56. storage.set('list',this.list);
  57. },
  58. removeData(key){
  59.  
  60. this.list.splice(key,1)
  61.  
  62. storage.set('list',this.list);
  63. }
  64. , saveList(){
  65.  
  66. storage.set('list',this.list);
  67. }
  68.  
  69. },mounted(){ /*生命周期函数 vue页面刷新就会触发的方法*/
  70.  
  71. var list=storage.get('list');
  72.  
  73. if(list){ /*注意判断*/
  74. this.list=list;
  75. }
  76. }
  77.  
  78. }
  79. </script>
  80.  
  81. <style lang="scss">
  82.  
  83. .finish{
  84.  
  85. li{
  86. background:#eee;
  87. }
  88. }
  89.  
  90. </style>

vue todolist 封装localstorage的更多相关文章

  1. vue+elementUI封装的时间插件(有起始时间不能大于结束时间的验证)

    vue+elementUI封装的时间插件(有起始时间不能大于结束时间的验证): html: <el-form-item label="活动时间" required> & ...

  2. MUI - 封装localStorage与plus.storage

    MUI - 封装localStorage与plus.storage 2.0版本 在使用plus.storage频繁地存取数据时,可以感觉到明显的卡顿,而且很耗内存, 在切换到localstorage时 ...

  3. 封装LocalStorage.js

    之前使用vue开发的项目频繁使用到localStorage,封装了一下 localStorage.js文件代码如下: let obj = {}; /** * putLocalStorage 把数据放到 ...

  4. vue axios封装以及登录token过期跳转问题

    Axios配置JWT/封装插件/发送表单数据 首先请务必已仔细阅读 Axios 文档并熟悉 JWT: 中文文档 JWT 中文文档 安装 npm install axios npm install es ...

  5. vue axios 封装(二)

    封装二: http.js import axios from 'axios' import storeHelper from './localstorageHelper' // 全局设置 const ...

  6. vue Axios 封装与配置项

    import axios from "axios"; import qs from "qs"; import { Message } from "el ...

  7. vue中使用localstorage

    1.store.js(读取写入到localstorage) const STORAGE_KEY="todos-vuejs" export default{ fetch(){ ret ...

  8. vue如何封装自己需要的方法

    因为现在vue的流行,vue的各种插件都出来了,我们公司也是使用vue做项目,我自己在做项目的时候自己去琢磨了其他的插件以及结合自己对vue和es2015的理解,自己找的了一种在vue中使用封装方法的 ...

  9. 【vue】使用localStorage解决vuex在页面刷新后数据被清除的问题

    通常,我们在使用vue编写页面时,会需要使用vuex在组件间传递(或者说共同响应)同一个数据的变化.例如:用户的登录信息. 下面,我们使用传递用户登录信息的例子来一步步解决这个问题. 首先,我们的第一 ...

随机推荐

  1. linux内核编程helloworld(中级)

    传入参数 [root@bogon modules]# cat first.c #include<linux/kernel.h> #include<linux/stat.h> # ...

  2. <--------------------------StringBuffer的常用方法------------------------------>

    StringBuffer定义: 是可变字符数组,是线程安全的可变字符序列. StringBuffer和String的区别: String是一个不可变的字符序列. 实例: public class St ...

  3. hiveserver 占用内存过大的问题

    今天为了求解hiveserver占用内存过大的问题,特地加了hive在apache的邮件列表,讨论半天.特别说的是 里面的人确实很热情啊 ,外国人做事确实很认真,讨论帖发的时候都狠详细. 粘出一些记录 ...

  4. Top PG Clustering HA Solutions for PostgreSQL

    转自:https://severalnines.com/blog/top-pg-clustering-ha-solutions-postgresql If your system relies on  ...

  5. Architecture options to run a workflow engine

    This week a customer called and asked (translated into my own words and shortened): “We do composite ...

  6. operator <<”不明确

    在声明重载的输出运算符<< 时,如果声明时的返回类型是std::ostream,而不是std::ostream&,但是定义的时候又加了引用的话,那么就会报“operator < ...

  7. python list 转换为str

    xiaoquInfo = ['暂无参考均价', '中仪花园海伦堡', '113.403781', '22.540973', '2008年建成', '塔楼', '2元/平米/月', '海伦堡物业', ' ...

  8. js调用.net后台事件,和后台调用前台等方法总结(转帖)

    js调用.net后台事件,和后台调用前台等方法总结 原文来自:http://hi.baidu.com/xiaowei0705/blog/item/4d56163f5e4bf616bba16725.ht ...

  9. java 字符集 Charset

    字符集就是为每个字符编个号码.如ASCII编码中,字符 'A' 的号码为 65 (或二进制01000001):GBK编码中,字符 '国' 对应的号码为47610 . 编码:将字符序列转换成二进制序列. ...

  10. ASP.NET AJAX入门系列(8):自定义异常处理

    在UpdatePanel控件异步更新时,如果有错误发生,默认情况下会弹出一个Alert对话框显示出错误信息,这对用户来说是不友好的,本文看一下如何在服务端和客户端脚本中自定义异常处理,翻译自官方文档. ...