Vue-浏览器本地存储

一、概述

1.定义

   以文件的方式存储在本地，通过把数据存在浏览器中，用户不必每次都向服务器请求获取同一个信息。在你离线时，使用本地存储的数据而不是向远端服务器上请求数据就非常方便，客户端存储可以通过这些技术来实现：cookie,webStorage（LocalStorage，sessionStorage），这一篇我们着重说webStorage

2.原理

    浏览器通过window.localStorage和window.sessionStorage属性来实现本地存储机制，存储内容大小一般支持5MB左右（不同浏览器可能不一样）

3.相关API

1.xxxStorage.setItem('key','value');      key是添加时使用的名字(键名)，value是值 (键值)

  该方法接受一个键和值作为参数，会把键值对添加到存储中，如果键名存在，则更新其对应的值 

2.xxxStorage.getItem('key')；

  该方法接受一个键和值作为参数，返回键名对应的值

3.xxx.Storage.removeItem('key');

  该方法接受一个键名作为参数，把该键名从存储中删除 

4.xxx.Storage.clear();

  该方法会清空存储中所有数据 

二、 举例

例如要存储一个组件中的数据，刚开始组件中data的数据都是写好的，done表示事情做还是没做

假如通过其增删操作可以对数组进行修改，现在我们要对todos这个数组进行本地存储

第一步就是要在这个组件中添加一个watch配置，用于监听todos的变化

1. 我们知道watch监视属性监视的只是表层数据，而我们data数据是数组，里面每一个又是一个对象，所以要使用深度监视，来监视对象里面数据的变化
2. 使用localStorage.setItem进行存储，如果直接将数据作为参数的话，则得到的是一个object,所以要用JSON.Stringify进行对象到json字符串的转变；

        第二步，现在我们不想数据是在data中写死的了，将todos设置成空数组，通过对数据的增加删除操作来生成数据，当我们添加一个数据的时候，就会更新todos，然后会触发watch监视属性，将todos的值进行本地存储，但是更新后的数据并未在页面上显示，这是因为，我们并没有将数据给读出来，使用localStorage.getItem将数据读出来，前提是将json字符串转为对象更新页面

1. 避免在后续中要使用到数据的长度，用了|| 空数组
2. 因为一开始数组是空的，然后localStorage.getItem读取一个空数组，结果是Null,JSON.parse(null)也是null，后续没办法使用一个数组值是null的长度，所以后面接一个或者是空数组

三、 注意

• sessionStorage存储的内容会随着浏览器窗口关闭而消失
• localStorage存储的内容，需要手动清除才会消失
• xxxxxStorage.getItem(xxx);如果对应的value获取不到，那么getter返回的值是null
• JSON.parse(null)的结果依然是null
• 注意：两者存储方式均不可以存储对象，若要存储，就要先将对象变为字符串(JSON.stringify)再存储，使用时将字符串变为对象(JSON.parse)即可