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

2023-06-09,,

本地存储:把一些信息存储到客户端本地(主要目的有很多,其中有一个就是实现多页面之间的信息共享)
 
    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的相关教程结束。

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

下载本文的Word格式文档,以方便收藏与打印。