# 本地存储
JavaScript在客户端的存储主要分为三种cookie、localStorage和sessionStorage
Chrome和Safari均有自己的本地存储查看和管理工具，Chrome中位于开发人员工具中的Application选项中。localStorage在Chrome查看如下，利用这个工具可以修改或者删除相应项。
# cookie
Cookie 是由 Web 服务器保存在用户浏览器（客户端）上的小文本文件，它可以包含有关用户的信息。无论何时用户链接到服务器，Web 站点都可以访问 Cookie 信息。每个cookie不能超过 4KB，每个 Web 站点能设置的 Cookie 总数不能超过 20 个
# 特点和应用
| 类别 | 描述 |
|---|---|
| 存储方式 | 键值对 |
| 大小 | 4kb,以20个为上限 |
| 访问 | 根据域名存储，不同域名的cookie无法访问 |
| 清理机制 | IE和Opera 会清理近期最少使用的cookie，Firefox会随机清理cookie。 |
| 缺陷 | 同域内http请求都会带cookie，浪费带宽 |
| 应用 | 购物车，登录状态 |
# 操作cookie
注意：cookie使用时需要服务器环境
键值对的方式设置：
document.cookie = "键=值"
document.cookie = name + '=' + value; //设置cookie
// 设置cookie的有效时间
var d= new Date();
d.setHours(d.getHours() + (24 * 30)); //保存一个月
document.cookie = "visited=yes; expires=" + d.toUTCString();
// 读取cookie
document.cookie.indexOf("key") //返回值 -1表示不存在此cookie
//删除cookie 原理：通过设置cookie的有效时间来删除cookie
var exp = new Date();
exp.setTime(exp.getTime() - 1);
document.cookie= name + "="+cval+";expires="+exp.toUTCString();
# localstorage
H5客户端存储是web存储的一种更为强大的版本，可提供更多的安全性、速度和易用性。在 Web 中可以存储数量巨大的数据。具体的数量则取决于 Web 浏览器，但通常都在 5MB 到10MB 之间，这对于一个 HTML应用程序而言已经足够大。另一个好处是此数据并不会在每次出现服务器请求时都被加载。
localStorage 没有时间限制的数据存储，也就是说，localStorage是永远不会过期的，除非主动删除数据。数据可跨越多个窗口，无视当前会话，在同一个域中被共同访问、使用。
# 特点和应用
| 类别 | 描述 |
|---|---|
| 兼容性 | ie8+ |
| 存储内容 | 只要是能序列化成字符串的内容都可以存储，利用JSON.stringify()； |
| 存储方式 | 键值对 |
| 访问权限 | 根据域名存储，不同域名的本地存储无法访问 |
| 存储大小 | 5M |
| 主要应用 | 常用于ajax请求缓存,需要长期保存的数据 |
| 缺陷 | 不能跨域共享，所以不要用以存储业务关键信息，更加不要存储安全信息 （cookie可以通过window.name解决，但是localstorage不能） |
# 判断浏览器是否支持localstorage
if (window.localStorage) {
console.log('浏览器支持');
} else {
console.log('浏览器不支持');
}
# 操作localstorage
| 方法 | 描述 |
|---|---|
| localStorage.length | 获得storage中的个数 |
| localStorage .key(n) | 获得storage中第n个键值对的键 |
| localStorage.key = value | 添加 |
| localStorage.setItem(key, value) | 添加 |
| localStorage.getItem(key) | 获取 |
| localStorage.removeItem(key) | 移除 |
| localStorage.clear() | 清除 |
localStorage.setItem("name","张三") //设置数据
localStorage.getItem("name"); //访问数据
localStorage.removeItem("name"); //移除本地存储
localStorage.clear()； //清空本地存储
# sessionStroage
短期存储，页面关闭后存储消失，其他与长期存储一样
针对一个 session 的数据存储，任何一个页面存储的信息在窗口中同一域下的页面都可以访问它存储的数据。每个窗口的值都是独立的，它的数据会因窗口的关闭而丢失，不同窗口间的sessionStorage是不可以共享的。
常用于：
- 具有时效性的网站信息，一段时候后打开浏览器数据消失
- 登录信息保存
- 搜索记录
- 同一网站不同网页之间的数据可存储到本地存储共同使用
| 方法 | 描述 |
|---|---|
| localStorage.length | 获得storage中的个数 |
| localStorage .key(n) | 获得storage中第n个键值对的键 |
| localStorage.key = value | 添加 |
| localStorage.setItem(key, value) | 添加 |
| localStorage.getItem(key) | 获取 |
| localStorage.removeItem(key) | 移除 |
| localStorage.clear() | 清除 |
# 三种存储方式的区别总结
# 相同点
都保存在浏览器端，同源的
# 不同点
- 传递方式不同
- cookie数据始终在同源的http请求中携带（即使不需要），即cookie在浏览器和服务器间来回传递。
- sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。
- 数据大小不同
- cookie数据不能超过4k
- sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。
- 数据有效期不同
- cookie只在设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭。
- sessionStorage：仅在当前浏览器窗口关闭前有效。
- localStorage：始终有效，窗口或浏览器关闭也一直保存，因此用作持久数据；
# 课堂练习
- toDoList练习