前端的本地缓存机制：Cookie,LocalStorge,SessionStorge

Cookie,LocalStorge,SessionStorge三者是前端最常用的本地缓存机制。
参考：三者对比：前端几种本地缓存机制。

Cookie

Document.Cookie

1. 作用：网络请求中传递数据。
2. 有效期：截止（服务器设定的）过期时间之前。不设置过期时间，则为会话cookie（存在内存里，生命期为浏览器会话期间，关闭窗口则cookie消失）。
3. 作用域：同源的不同窗口共享。
4. 大小限制：4k
5. 存储位置：不仅在本地存储（硬盘），也会始终在同源的http请求中携带。除了会话cookie存在内存上。
6. 操作读写：浏览器提供document.cookie，对cookie的赋值，获取较麻烦。PHP中，我们可以通过setcookie()来设置cookie，通过$_COOKIE这个超全局数组来获取cookie。

内容：

名字，值，过期时间，路径和域。路径与域一起构成cookie的作用范围。

tips:

1. 安全性问题：可以被拦截和修改。所以登陆信息等重要信息存放为SESSION，其他信息如果需要保留，可以放在cookie中。
2. 与SESSION的关系：程序请求创建session时，服务器会在cookie中检索session标识（称为session_id），如果已包含则会把这个session检索出来使用。
   
   

sessionStorage

Window.sessionStorage

1. 作用：识别用户并保持用户信息。
2. 有效期：会话级存储，关闭窗口则被销毁。
3. 作用域：同源的不同窗口也不共享。
4. 大小限制：以内存为上限。
5. 存储位置：存储在本地。

tips：

是HTML5新增的一个会话存储对象，只能存字符串。

方法（操作读写）

sessionStorage.length 获得storage中的个数
sessionStorage.key(n) 获得storage中第n个元素对的键值（第一个元素是0）
sessionStorage.getItem(key) 获取键值key对应的值
sessionStorage.key 获取键值key对应的值
sessionStorage.setItem(key, value) 添加数据，键值为key，值为value
sessionStorage.removeItem(key) 移除键值为key的数据
sessionStorage.clear() 清除所有数据

localStorage

1. 作用：
2. 有效期：持久化存储，如果不手动清除，数据永远不会过期。
3. 作用域：同源的不同窗口共享数据。
4. 大小限制：各个浏览器不一致，大部分为5M左右。
5. 存储位置：存储在本地。

方法（操作读写）

localStorage.length 获得storage中的个数
localStorage.key(n) 获得storage中第n个元素对的键值（第一个元素是0）
** localStorage.getItem(key)** 获取键值key对应的值
** localStorage.key** 获取键值key对应的值
** localStorage.setItem(key, value)** 添加数据，键值为key，值为value
** localStorage.removeItem(key)** 移除键值为key的数据
** localStorage.clear()** 清除所有数据

---

2018.4.1