前端性能——数据持久化

如何实现数据持久化

一般情况下，借用本地存储用的比较多，或者一些插件，如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'

总结

以上是生活随笔为你收集整理的前端性能——数据持久化的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。