前端数据持久化

世间万物皆对象

发布于 2024-03-20 19:57:19

1260

发布于 2024-03-20 19:57:19

文章被收录于专栏：start

如何实现数据持久化

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

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2024-03-20，如有侵权请联系 cloudcommunity@tencent.com 删除

后端