欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

本地存储常用方式 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:本地缓存存储

 本地存储常用方式 localStorage, sessionStorage,cookie 的区别 和 服务器存储session

 
用到本地存储的地方:
   [页面之间信息的通信]
       a存储信息,b页面中可以获取
       1. 登录
       2. 记住用户名密码(或者自动登录)
       3. 购物车
       4. 跳转到其它页面,返回上级页面的时候停留在之前最后一次
 
我们来看看本地存储cookie和服务端session的具体做法及使用场景
本地存储常用方式 localStorage, sessionStorage,cookie 的区别 和 服务器存储session

 本地存储常用方式 localStorage, sessionStorage,cookie 的区别 和 服务器存储session

 本地存储常用方式 localStorage, sessionStorage,cookie 的区别 和 服务器存储session

 本地存储常用方式 localStorage, sessionStorage,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