【存储方案】本地存储和服务器存储

时间:2024-03-15 19:39:56

本地存储和服务器存储

本地存储

把一些信息存储到客户端本地(主要目的有很多,其中有一个就是实现多页面之间的信息共享)

  1. 离线存储(xxxx.manifest),H5处理离线缓存还是存在一些硬伤,所以真实项目中一般还是传统的【NATIVE APP】来完成这件事情。
  2. localStorage / sessionStorage:H5中新增加的API,基于这个API可以把一些数据缓存到客户端本地(常用)。4
  3. IndexedDB / webSQL:本地数据库存储。
  4. Cookie:本地信息存储(常用)。
  5. CacheStorage / ApplicationCache:本地缓存存储。

应用场景

【页面之间信息的通信】

【存储方案】本地存储和服务器存储

  1. A页面存储的信息,B页面可以获取【登录;记住用户名密码(或者自动登录);购物车;跳转到其他页面,返回上级页面的时候停留在之前最后一次点击的位置】

【做一些性能优化】

  1. 把一些不经常改变的数据,在第一次从服务器端获取到之后,存储到客户端本地(记录一个存储时间),假设我们设置有效有效存储期是10分钟,那么10分钟以内,我们再刷新页面,就不用再向服务器发送请求了,直接从本地数据获取展示即可。超过10分钟之后,重新向服务器发送请求,请求回来的最新数据参考第一次,也一样存储到本地种。。。这样做的好处【减轻服务器压力】
  2. 对于不经常更新的数据,我们可以存储周期设置的长一些,有助于页面第二次加载的速度更快(移动端经常做这些事情)

记住用户名密码 / 自动登录模型

【存储方案】本地存储和服务器存储

 


服务器端存储

登录模型

【存储方案】本地存储和服务器存储

Session和Cookie的关联

  1. session是服务器端存储,cookie是客户端存储

  2. 在服务器端建立session之后,服务器喝当前客户端之间会建立一个唯一的标识(sessionID / sid),而本次存储的session信息都存放到对应的sid下(目的是为了区分不同客户端在服务器上建立session信息,后期查找的时候,可以找到自己当初建立的)。

  3. 当服务器端把2一些成功或失败的结果返回给客户端的时候,在响应头信息会增加set-cookie【客户端的cookie】这样的字段,把connect.sid存储到客户端的cookie信息中。

  4. 当客户端在向服务器发送任何请求的时候,在请求头中,都会把Cookie信息带上,传递给服务器(包含了之前存储的connect.sid信息)

购物车模型

 【存储方案】本地存储和服务器存储