Vuex持久化原理——不担心刷新后数据没了

前言

同样是发现问题，解决问题的角度我们来分析，首先我们遇到了什么问题呢？就是当我们对数据增删改查之后，刷新页面，咦，我们刚才操作的数据不见了。那么怎么去解决问题呢？首先想到的是把数据存储起来呗，非常聪明，我们就是这么干的。那我们下面来看一看。

一、本地存储

在localStorage或sessionStorage或其它存储方式中取值,

这里我们不结合Vuex来看，举个简单的例子，经典案例TodoList，这里我们使用localStorage

先了解一下基础知识

生存期

localStorage理论上来说是永久有效的，即不主动清空的话就不会消失，即使保存的数据超出了浏览器所规定的大小，也不会把旧数据清空而只会报错。

数据结构

localstorage为标准的键值对（Key-Value,简称KV）数据类型，简单但也易扩展，只要以某种编码方式把想要存储进localstorage的对象给转化成字符串，就能轻松支持。

大小

localStorage拓展了cookie的4K限制，可以有5M甚至更大

localStorage主要有以下几种方法:

setItem(“key”,“value”)：存储名字为key的一个值value，如果key存在，就更新value

getItem(“key