前端数据持久化
目录
前端数据持久化
如何实现数据持久化
一般情况下，借用本地存储用的比较多，或者一些插件，如vue的keep-alive，配合redux使用的persist
为什么需要数据持久化
1、减少发起请求的次数，从而提高性能。
场景：比如一个网站，数据是每天更新一次，间隔时间长，当然就可以将请求到的信息存储到本地，第二次进入获取信息从本地拿
2、用户体验方面
登陆的状态，不用每次都需要登陆
表单填写，切换页面之后数据不会消失
实现数据持久化的方法
1、localStorge
特性: 永久存储,手动清除,存储大小5M
语法：
取值 : `localStorage.getItem('key') `
存值 : localStorage.setItem('key','value')
清除单个值 : localStorage.removeItem('key')
清除所有值 ：localStorage.clear( )2、sessionStorage
特性：关闭浏览器存储清空，其余与 localStorage 一样
3、cookie
特性：可设置存储时间，存储大小 4k，后端可以直接获取，设置，所以前端一般不操作
语法
获取本地 cookie ：document.cookie( )
设置 cookie ：document.cookie = 'key=value'
向后追加，不是替换
expires 指定 Cookie 过期时间;格式采用 Date.toUTCString()
domain 指定发送 Cookie 的域名
path 指定 Cookie 的路径
secure 指定 Cookie 只能在加密协议 HTTPS 下发送到服务器,值是一个布尔值 var day = new Date();
day.setTime(day.getTime()+(1_24_60_60_1000));
document.cookie = 'userName=fengkaicahng;expires='+day
+';domain=fengkaichang.com;path=/;secure=true'