Cookie,LocalStorge,SessionStorge三者是前端最常用的本地缓存机制。
参考：三者对比：前端几种本地缓存机制。
Cookie
Document.Cookie
- 作用：网络请求中传递数据。
- 有效期：截止（服务器设定的）过期时间之前。不设置过期时间，则为会话cookie（存在内存里，生命期为浏览器会话期间，关闭窗口则cookie消失）。
- 作用域：同源的不同窗口共享。
- 大小限制：4k
- 存储位置：不仅在本地存储（硬盘），也会始终在同源的http请求中携带。除了会话cookie存在内存上。
- 操作读写：浏览器提供document.cookie，对cookie的赋值，获取较麻烦。PHP中，我们可以通过setcookie()来设置cookie，通过$_COOKIE这个超全局数组来获取cookie。
内容：
名字，值，过期时间，路径和域。路径与域一起构成cookie的作用范围。
tips:
- 安全性问题：可以被拦截和修改。所以登陆信息等重要信息存放为SESSION，其他信息如果需要保留，可以放在cookie中。
- 与SESSION的关系：程序请求创建session时，服务器会在cookie中检索session标识（称为session_id），如果已包含则会把这个session检索出来使用。
sessionStorage
Window.sessionStorage
- 作用：识别用户并保持用户信息。
- 有效期：会话级存储，关闭窗口则被销毁。
- 作用域：同源的不同窗口也不共享。
- 大小限制：以内存为上限。
- 存储位置：存储在本地。
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
- 作用：
- 有效期：持久化存储，如果不手动清除，数据永远不会过期。
- 作用域：同源的不同窗口共享数据。
- 大小限制：各个浏览器不一致，大部分为5M左右。
- 存储位置：存储在本地。
方法（操作读写）
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
网友评论