如何实现数据持久化
一般情况下,借用本地存储用的比较多,或者一些插件,如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'