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

本地存储和服务器存储

本地存储

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

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. 对于不经常更新的数据，我们可以存储周期设置的长一些，有助于页面第二次加载的速度更快（移动端经常做这些事情）

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

localStorage和cookie的区别
【cookie】

 

1. 兼容所有的浏览器有存储的大小限制，一般一个源（一个域下）只能存储4KB内容
2. cookie有过期时间（当然我们自己可以手动设置这个时间）
3. 杀毒软件或者浏览器的垃圾清理都可能会把cookie信息强制清除掉
4. 在隐私或者无痕浏览模式下，是不会记录cookie的
5. cookie不是严格的本地存储，因为要和服务器之间来回传输

【localStorage】

 

1. 不兼容IE8及以下
2. 也有存储的大小限制，一个源下最多只能存储5MB左右
3. 本地永久存储，只要你不手动删除，永远存储在本地（但是我们可以基于API remove/clear手动清楚一些自己要删除的信息）
4. 在隐私或者无痕浏览模式下，是会记录localStorage的
5. 杀毒软件或者浏览器的垃圾清理暂时不会清理localStorage（新版本的谷歌浏览器会清楚localStorage）
6. localStorage和服务器没有任何关系

真实项目中使用本地存储来完成一些需求的情况不是很多，一般都会基于服务器的session或者数据库存储完成的（服务器的session和本地的cookie是有关联的），如果不考虑兼容，就想基于本地存储来完成一些事情，那么一般都是localStorage的（尤其是移动端）

sessionStorage跟session没有任何关系，sessionStorage临时会话本地存储，页面关闭时存储的内容消失

 

• localStorage.setIitem([key], [value])：【value】必须是字符串格式的（即使写的不是字符串，也会默认转换为字符串）
• localStorage.getItem([key])：通过属性名获取存储的信息
• localStorage.removeItem([key])：删除指定的存储信息
• localStorage.clear()：清除当前域下存储的所有信息
• localStorage.get(number)：基于索引获取指定的key名
• ...

document.cookie = '';  //设置cookie的内容

---

服务器端存储

登录模型

Session和Cookie的关联

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

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

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

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

购物车模型