本篇文章给大家详细介绍一下vue封装一个todolist的方法。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。
使用Vue封装一个简易的Todolist的小案例. 同时加入了浏览器本地缓存的技术手段.
浏览器本地缓冲:
- 前提： 一般我们定义的变量，或者用Vuex保存的数据， 当浏览器进行了一个刷新 那么这个数据就会丢失, 这样就做不出历史记录的效果了， 但是， 使用浏览器缓存就可以帮助我们解决这个问题…
-
浏览器缓存分为二种 sessionStorage 和 localStorage， 二种原型链分别如下:
立即学习“前端免费学习笔记（深入）”；
可以看得出， 他们的原型链上基本都是一样的， 唯一的区别在于
localStorage 作用于本地缓存， 时间是持久的，除非手动去删除， 或者清空， 不然一直都存在浏览器中
- sessionStorage 作用与会话缓存， 生命周期只存在于本次打开浏览器会话， 当完成的关闭浏览器，那么信息就会丢失， 而仅仅刷新页面， 数据仍然保存。
本次实例，使用的是 sessionStorage， 并对此进行了一次小封装.
const storage = {
set(key, value){
window.sessionStorage.setItem(key, JSON.stringify(value));
},
get(key){
return JSON.parse(window.sessionStorage.getItem(key));
},
remove(key){
window.sessionStorage.removeItem(key);
}}export default storage;实例代码:
TodoList 正在进行...{{dolistNumber}}
X
已经完成...{{dolist.length - dolistNumber}}
X
推荐学习：vue.js教程
