在最近的新项目中，用的是vue+Element的经典组合，Element自带的存储用的是轻量级的js cookie插件：js-cookie。在浏览器中F12检查元素，之后点击Application，即可看到Local Storage、Session Storage、Cookie，可以看出，前二者的存储是由key和value(键值对)组成，而Cookie则包含名称、值、到期时间、所属域名、生效的路径组成。然而，cookie本身并不适合用于数据存储，于是就将存储改为使用Local storage，下面将就其区别与用法谈谈cookie与storage(即Web Storage，又分为Local Storage 与Session Storage)。

    当你浏览网页时，服务器会先在浏览器中保存的一小段文本信息，当你再次浏览这个网站时，确认为你的账号后，cookie会帮你推荐出特定的内容。cookie可以保存登陆，购物车等需要记录的信息；保存用户的偏好，比如网页的字体大小、背景色等等；记录和分析用户行为。cookie的使用可以让我们觉得那些网站或app更亲切，更人性化，如同“小甜点”一般。然而cookie并不适合客户端存储，它的容量很小（4KB），缺乏数据操作接口，而且会影响性能。与之相比，Storage有大很多的存储空间，并且可以节约带宽。

常见属性和方法：

1.storage.setItem()用于存入数据，主要接收键名key和键值value两个参数

window.sessionStorage.setItem('key', 'value'); 
window.localStorage.setItem('key', 'value');

2.storage.getItem()用于读取数据，接收键名一个参数

window.sessionStorage.getItem('key')
window.localStorage.getItem('key')

3.storage.removeItem()用于清除某个键名对应的键值

sessionStorage.removeItem('key');
localStorage.removeItem('key');

4.storage.clear()用于清除所有保存的数据

5.storage只有storage.length一个属性，用于返回保存的数据项个数，有时也会用到。

    由上面可知，local Storage和session Storage用法基本一致，二者不同点在于数据存储时限不同，local Storage可永久保存，session Stoage则在session（对话）结束后就会删除。另外值得注意的是storage存储的是字符串，如果将JSON存入，与读取，需要用到：

1.　　JSON.stringify(data) 将对象转换成JSON格式的数据串。

2.　　JSON.parse(data)将数据解析成对象并返回解析后的对象。