本地存储和服务器存储

本地存储

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

• 离线缓存（xxx.manifest） H5处理离线缓存还是存在一些硬伤的，所以真实项目中一般都基于传统的native app来完成这件事
• localStorage / sessionStorage：H5中新增加的API，基于这个API可以把一些数据缓存到客户端本地（常用）
• indexDB / webSQL：本地数据库存储
• cookie：本地信息存储（存储）
• CacheStorage / ApplicationCache：本地缓存存储
• …

【cookie特点】
	1. 兼容所有浏览器
	2. 有存储大小限制，一个域下只能存储4KB
	3. cookie有过期时间
	4. 杀毒软件或者浏览器的垃圾清理可以清除cookie
	5. 在隐私模式或无痕浏览模式下，不记录cookie
	6. cookie不是严格的本地存储，因为要和服务器来回传输
	
【localStorage】
	1. 不兼容IE8以下
	2. 有存储限制，一个域下只能存储5MB左右
	3. 本地永久存储（当然可以手动删除romoveItem/clear）
	4. 杀毒软件或者浏览器的垃圾清理不会清除localStorage
	5. 在 隐私模式或无痕浏览模式下，记录localStorage
	6. localStorage和服务器无关

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

本地存储的特点

• 本地存储都是存储到当前浏览器指定的地方（在谷歌浏览器中存储的信息，在IE浏览器中获取不到，无法跨浏览器进行传输）
• 存储的信息是按照域来管理的（访问京东网站，把信息存储到了jd.com中，在其他域的网站无法直接获取这些信息，本地存储无法跨域）

本地存储API

1. localStorage

localStorage.setItem([key],[value]);
	创建一个本地存储信息
localStorage.getItem([key]);
	获取指定key名的存储信息
localStorage.removeItem([key]);
	移除指定key名的存储信息
localStorage.clear()
	清除当前域下所有存储信息
localStorage.key(0)
	基于索引获取指定的key名
...

2. cookie

【直接操作】
document.cookie='...'
	创建一个本地cookie存储
	
【封装一个cookie.js】
cookie.set([name],[value]);
cookie.get([name]);
cookie.remove([name]);

本地存储的应用：

• 页面之间信息的通信

  【登录】实现快速登录、用户名密码的自动填写
  	当点击登录按钮时，如果登录成功：
  	1. 把用户名和密码（经过加密的）存储到客户端本地
  	2. 根据fromURL进行页面跳转
  	
  	- 当以后重新打开这个网站，首先看一下本地存储中是否有用户名密码，如果有直接拿本地的信息向服务器发送请求，完成登录操作，如果登录失败，则跳转登录页面，重新登录
  	
  	- 重新打开登录页，我们需要先从本地把信息获取到，把信息存放到对应的文本框中
  	
  记录用户名密码
  购物车（项目中一般都是服务器端做session存储或数据库存储）
  跳转到其他页面，返回上级页面的时候停留在之前最后一次点击的位置
  

• 做一些性能优化

  把一些不经常改变的数据，在第一次从服务器端获取到之后，存储到客户端本地（记录一个存储时间），假设我们设置一个有效存储是10分钟，那么10分钟以内，我们再刷新页面，就不用再想服务器发送请求了，直接从本地存储中获取展示即可；超过10分钟，重新向服务器发送请请求，请求回来的最新数据参考第一次，也一样存储到本地中...
  	=> 减轻服务器压力
  	=> 对于不经常更新的数据我们可以把存储周期设置的长一些，有助于页面第二次加载的时候的渲染机制（移动端经常做这些事情）
  	
  

【其他】
需求1： 点击列表跳转对应详情页
A页面中有一个列表，点击列表中每一项，跳转B页面（详情页面），在B页面中根据传递传递参数的不同，展示不同的数据（前提是A页面中的某个操作可以调转到B页面）
	URL：'B.html?xxx=xxx'（进入到B页面，首先把传递的参数获取到，根据传递的不同，我们从服务器获取不同的数据，从而将展示不同的内容）
	案例：投票案例中index.html中点击参赛人员头像，跳转detail.html根据编号展示对应的内容。

session和cookie的关联

1. session是服务器存储，cookie是客户端存储
2. 在服务器端建立session之后，服务器和当前客户端之间会建立一个唯一标识（sessionID/sid），而本次存储的session信息都放到对应的sid下（目的是为了区分不同客户端都在服务器上建立session信息，后期查找的时候，可以找到自己当初建立的）
3. 当服务器端把一些成功或者失败的结果返回给客户端的时候，在响应头信息中会增加set-cookie（客户端的cookie）这样的字段，把connect.sid存储到客户端的cookie信息中
	set-cookie:connect.sid=...;Path=...;Expires=...;HttpOnly
	connect.sid:id标识
	Path:路径
	Expries:到期时间
	HTTPOnly:规定当前cookie信息只读
4. 当前客户端在向服务器发送任何请求的时候，在请求头中，都会把cookie信息带上，传递给服务器（包含之前存储的connect.sid信息）
	Cookie:...;connect.sid=...

登录模型

购物车模型（未登录）

购物车模型（登录）

未登录状态下加入购物车的信息在session中存储，在登录后，都要先保存到数据库中，然后把session信息清除

使用到数据库存储，目的是为了实现跨平台