499 H5中WebStorage：localStorage 、 sessionStorage，cookie
本地存储 VS 服务器存储
本地存储：把信息存储在客户端本地
谷歌控制台Application中都可以查看到
- cookie
- H5中WebStorage：localStorage 、 sessionStorage
- 本地数据库存储：IndexDB
- 本地缓存存储：manifest
- ...
服务器存储：把数据存储在服务器端
- 数据库存储：SQLSERVER / MYSQL / ORACLE / MONGODB ...
- REDIS
- SESSION
- ...
* 什么时候会用到本地存储？本地存储的作用？
* 1.记住用户名和密码、或者自动登录
* 2.未登录状态下，加入购物车的信息一般也先存储在本地，当登录后，把信息存储到服务器上（目的是多平台数据共享）
* 3.对于非实时刷新数据，可以从服务器把数据获取到后，临时存储在本地（设置有效时间），在有效时间内页面刷新，不再重新从服务器获取数据，而是读取本地数据；超过有效时间重新从服务器拉取... “前端性能优化的一点”
* 4.还能实现同一个网站，不同页面之间的信息共享和通信
* ......
*
* 本地存储到底存储在哪了？
* 1.本地存储是受浏览器限制的，例如：在谷歌中存储的数据，在IE中获取不到
* 2.受源(域)的限制，例如：都是用谷歌浏览器，我在京东下存储的数据，在百度中是获取不到的
*
* 本地存储的信息在控制台中可以查看到（而且是明文存储），所以敏感的数据尽可能不要存储在本地，非要存储也要做安全处理（例如：加密）
* setItem([key], [value])： 存储信息
* getItem([key])： 获取信息
* removeItem([key])： 移除某一项信息
* clear()： 清除所有存储的信息
*
* => 向本地存储的信息都是string字符串格式
* => localStorage 是持久化存储在客户端本地的（除非手动清除或者浏览器卸载等，否则一直存储下来，没有过期时间）
* => sessionStorage 会话存储（当前页面刷新，存储信息还在，但是只要页面一关闭，所有会话存储的信息都会消失）
* 设置cookie => jquery.cookie.js
* document.cookie="[key]=[value];..."
$.cookie('username', '哈哈');
console.log($.cookie('username'));
$.removecookie('username');
$.cookie('username', 'zhufeng', {
expires: new Date(new Date().getTime() + 30 * 24 * 60 * 60 * 1000)
});
* 1.大小限制：一般浏览器允许一个源下cookie最多存储8KB，而localStorage被允许存储最大的长度限制是5MB
* 2.兼容性：cookie兼容所有浏览器，而localStorage是H5中新增的，不兼容IE低版本浏览器（IE6~8）
* 3.稳定性：cookie有过期时间，但是一般不等到时间可能就没了（例如：清除浏览器的缓存或者历史信息、安全卫士在清理电脑垃圾等操作时，都有可能会把存储的cookie给清除掉），但是这些操作对localStorage没有影响
* 4.有时候浏览器会开启无痕浏览或者隐私模式，此时无法设置cookie，但是可以设置localStorage的信息
* 5.和服务器端的猫腻：cookie总是会和服务器中的SESSION眉来眼去（客户端和服务器端交互的时候，cookie信息会传来传去），而localStorage不屑于和他们同流合污（localStorage和服务器没有必然的联系，是单纯的本地存储）
* 6.存储时间：cookie有过期时间，而localStorage是持久存储
练习题
比如 http://a.test.com/index.html 页面设置了 sessionStorage
然后页面里有一个链接 < a href="http://a.test.com/about.html" target="_blank">跳转新页面</ a>
点击a链接以后，新开了一个标签页，显示了新页面。那这个新页面有 index 页面的 sessionStorage 吗？如果还有一个按钮
这个按钮有一个事件 window.open('http://a.test.com/home.html')
然后点击这个按钮，弹出来的这个新窗口home.html，有没有 之前index.html页面设置的sessionStorage 呢？
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>111页面</title>
</head>
<body>
<div id="div">111</div>
<a href="./222.html" target="_blank">电价我</a>
<button id="btn">按钮</button>
</body>
</html>
<script>
window.sessionStorage.setItem('a', '111')
btn.onclick = function () {
window.open('./home.html')
}
</script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>222页面</title>
</head>
<body>
<h2>哈哈哈哈</h2>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>home页面</title>
</head>
<body>
<h2>home</h2>
</body>
</html>
