【浅谈】vue数据存储

【浅谈】vue数据存储

客户端存储数据能优化性能，减少不必要的接口调用
方式：
cookie、LocalStorage、sessionStorage、indexedDB
vue官网描述
LocalStorage：简单，存储键/值对，通过JSON存储复杂数据，适合存储较小数据
indexedDB：适合更大规模和更复杂的数据
注意点：将变化的值立即写入LocalStorage是不被推荐的

LocalStorage处理简单数据
localStorage.name;
localStorage.name = this.name;
LocalStorage处理复杂数据
cats = JSON.parse(localStorage.getItem('cats'));
localStorage.setItem('cats', cats);

前端cookie、localStorage、sessionStorage的区别

cookie：存储数据小，跟域名绑定在一起随着请求一起传给后端，默认会话结束时被删除，也可以设置过期时间（这点感觉有点意思，可以用于前端保存用户登录状态，但是一般都是由后端控制，这样实用性就降低了）
webStorage：数据无需时刻发送给服务器（就这点来说，webStorage就好一些），可以存储大量跨会话数据；sessionStorage数据存储在内存中，页面关闭会话数据被删除，LocalStorage数据存储硬盘中，只能手动删除，数据不能跨域
webStorage使用方便，存储数据多，不需要传给服务器，安全，速度更快