本地存储常用方式 localStorage, sessionStorage,cookie 的区别 和 服务器存储session
程序员文章站
2023-08-30 17:03:29
本地存储:把一些信息存储到客户端本地(主要目的有很多,其中有一个就是实现多页面之间的信息共享) 1. 离线缓存(xxx.manifest) H5处理离线缓存还是存在一些硬伤的,所以真实项目中一般还是传统的NATIVE APP来完成这件事情 2. localStorage / sessionStora ......
本地存储:把一些信息存储到客户端本地(主要目的有很多,其中有一个就是实现多页面之间的信息共享)
1. 离线缓存(xxx.manifest) h5处理离线缓存还是存在一些硬伤的,所以真实项目中一般还是传统的native app来完成这件事情
2. localstorage / sessionstorage:h5中新增加的api,基于这个api可以把一些数据缓存到客户端本地 (常用)
3. indexeddb / websql :本地数据库存储
4. cookie:本地信息存储(常用)
5. cachestorage / applicationcache:本地缓存存储
用到本地存储的地方:
[页面之间信息的通信]
a存储信息,b页面中可以获取
1. 登录
2. 记住用户名密码(或者自动登录)
3. 购物车
4. 跳转到其它页面,返回上级页面的时候停留在之前最后一次
我们来看看本地存储cookie和服务端session的具体做法及使用场景
[做一些性能优化]
把一些不经常改变的数据,在第一次从服务器端获取到之后,存储到客户端本地(记录一个存储时间),假设我们设置有效存储期是10分钟,那么10分钟以内,我们再刷新页面,就不用再向服务器发送请求了,直接从本地数据中获取展示即可;超过10分钟,从新向服务器发送请求,请求回来最新数据参考第一次,也一样存储到本地中...
1. 可减轻服务器压力
2. 对于不经常更新的数据我们可以把存储周期设置的长一些,有助于页面第二次加载的时候,渲染的速度(移动端经常做这些事情)
localstorage vs cookie
[cookie]
1.兼容所有的浏览器
2.有存储的大小限制,一般一个源(一个域下)只能存储4kb内容
3.cookie有过期时间(当然我们自己可以手动设置这个时间)
4.杀毒软件或者浏览器的垃圾清理都可能会把cookie信息强制清除掉
5.在隐私或者无痕浏览模式下,是不记录cookie的
6.cookie不是严格的本地存储,因为要和服务器之间来回传输
[localstorage]
1.不兼容ie8及以下
2.也有存储的大小限制,一个源下最多只能存储5mb左右
3.本地永久存储,只要你不手动删除,永远存储在本地(但是我们可以基于api removeitem/clear手动清除一些自己想要删除的信息)
4.杀毒软件或者浏览器的垃圾清理暂时不会清除localstorage(新版本谷歌浏览器会清除localstorage等信息)
5.在隐私或者无痕浏览模式下,是记录localstorage的
6.localstorage和服务器没有半毛钱关系
真实项目中使用本地存储来完成一些需求的情况不是很多,一般都是基于服务器的session或者数据库存储完成的(服务器的session和本地的cookie是有关联的),如果不考虑兼容,就想基于本地存储来完成一些事情,那么一般都是用localstorage的(尤其是移动端开发)
localstorage.setitem([key],[value]):[value]必须是字符串格式的(即使写的不是字符串,也会默认转换为字符串)
localstorage.getitem([key]):通过属性名获取存储的信息
localstorage.removeitem([key]):删除指定的存储信息
localstorage.clear():清除当前域下存储的所有信息
localstorage.key(0):基于索引获取指定的key名
document.cookie='';//=>设置cookie
推荐阅读
-
本地存储常用方式 localStorage, sessionStorage,cookie 的区别 和 服务器存储session
-
jQuery访问浏览器本地存储cookie、localStorage和sessionStorage的基本用法
-
本地存储常用方式 localStorage, sessionStorage,cookie 的区别 和 服务器存储session
-
jQuery访问浏览器本地存储cookie、localStorage和sessionStorage的基本用法
-
HTML5 Web存储方式的localStorage和sessionStorage进行数据本地存储案例应用_html5教程技巧
-
HTML5 Web存储方式的localStorage和sessionStorage进行数据本地存储案例应用_html5教程技巧