本地存储 VS 服务器存储

1. 本地存储：把信息存储到本地客户端。

   控制台 => network => application 可以查看本地存储信息（明文存储），所以敏感数据尽可能不要存储在本地，如果必须这么做，也要做好安全处理，例如：加密。

   
   

   常见的本地存储方式：

   - cookie

   - H5中的webStorage: localStorage / sessionStorage

   - 本地存储数据库：IndexDB

   - 本地缓存存储： manifest

2. 服务器存储：把数据存储在服务器端

   数据库存储：MySQL MongoDB SQLServer 等

   REDIS

   session

什么时候会用到本地存储？

1. 自动登录（保存用户的账户、密码）

2. 未登录状态下，加入购物车的信息一般也先存储在本地，当登录后，把信息存储到服务器上（目的是多平台数据共享）。

3. 对于非实时刷新的数据，我们可以从服务器把数据获取后，临时存储在本地（设置有效时间），在有效时间内页面刷新，不再重新从服务器获取，而是读取本地数据，若超过有效时间则重新从服务器拉去。

4. 同一个网站不同页面之间的信息共享。

本地存储的一些特点：

1. 受浏览器限制，例如：谷歌中存储的数据，火狐中获取不到。

2. 受同源策略限制，例如：同一浏览器下，访问京东的购物车信息，淘宝获取不到。

3. 向本地存储的信息都是String字符串格式。

4. localStorage 是永远存储在客户端本地的，除非手动删除 或 卸载浏览器。否则会永远保存，没有过期时间。

5. sessionStorage 会话存储，页面关闭，所有信息消失。（当前页面刷新，数据不会消失）
   

本地存储常用方法：

• setItem([key],[value]) 存储信息

• getItem([key]) 获取信息

• removeItem([key]) 移除某一项信息

• clear() 清除所有信息
  

cookie：

1. cookie 的直接操作极为不便，虽然可以引入 JQuery.cookie 操作。

2. 大小限制：一般一个源下，允许cookie 最多存储8KB， 而localstorage 则可以达到5MB。

3. cookie 可以兼容所有浏览器，localstorage为H5新增。

4. 稳定性差：cookie 有过期时间，但是一般等不到时间就被清除了。（例如：清理游览器缓存或历史信息、或者电脑管家等清除电脑垃圾。但是这些操作对 localstorage 无影响。）

5. 如果浏览器开启无痕模式、隐私模式，此时是无法设置cookie的，但可以设置localstorage。

6. 基于cookie与session的关联性，客户端与服务器端交互时，cookie信息会传来传去。而localstorage 和服务器没有必然联系，只是单纯的本地存储。