网络之存储（cookie webStorage ）
cookie 存储数据的功能已经很难满足开发所需，逐渐被 WebStorage、IndexedDB 所取代
cookie详情见cookie
①LocalStorage
保存的数据长期存在（特点：持久），下一次访问该网站的时候，网页可以直接读取以前保存的数据。仅在客户端使用，不和服务器进行通信。
可以作为浏览器本地缓存方案。用来提升网页首屏渲染速度（根据第一次返回，将一些不变得信息直接存储在本地）
存入数据：locoalStorage.setItem("key","value");
读取数据：locoalStorage.getItem("key");
<body>
<div id="name"></div>
<div id="gender"></div>
<script>
var name = localStorage.getItem("name");
var gender = localStorage.getItem("gender");
document.getElementById("name").innerHTML = name;
document.getElementById("gender").innerHTML = gender;
</script>
</body>
△因为他的特点是持久，所以用它来存储一些内容稳定的资源，比如图片内容丰富的电商网站存储图片字符串。
②sessionStorage
sessionStorage保存的数据用于浏览器的一次会话，会话结束的时候（窗口关闭的时候），数据被清空；他的特点：即使是相同域名下的两个页面，只要他们不在同一个浏览器窗口中打开，他们的sessionStorage就无法共享；localStorage在所有窗口中是共享的，cookie也是在所有同源窗口中共享。除了保存期限的长短不同，SessionStorge的属性方法和localStorage的完全一样。
sassionStorage的特点：会话级别的浏览器存储，5M左右，仅在客户端使用，不和服务端进行通信，接口封装良好。
所以sessionStorage可以有效的对表单信息进行维护，比如刷新的时候，表单信息不丢失。只适用于当前会话，存储生命周期和他同步的当前级别的会话，当你开启新会话的时候，他也需要相应的更新或释放。
sessionStorage 和localStorage的区别：
同：都保存在浏览器端且都遵循同源策略。
异：生命周期与作用域不同。
作用域：localStorage只要在相同的协议域名端口号下，就能够读取或者修改同一份localStorage数据。sessionStorage比localStorage严苛，还必须在同一个窗口下。
生命周期：localStorage是持久化的本地存储，存储在里面的数据除非手动删除否则不会过期。sessionStorage是临时性的本地存储，会话级别存储，会话结束存储内容释放。
webStorage
键值对形式进行存储，只能存储字符串，想要得到对象就要对字符串进行解析，只能存储少量的简单数据。
④IndexedDB：
低级Api，客户端存储大量结构化数据。引用索引实现对数据的高能搜索，是一个运行在浏览器上的非关系型的数据库。没有存储上限，不仅可以存储字符串，还可以存储二进制数据。
特点：键值对存储。异步（localStorage的操作是同步的）异步是为了防止大量数据读写，拖慢网页。支持事务（只要有一步失败，整个失误就取消，数据库回滚到事务发生之前的状态，不存在只写一部分数据的情况）。同源限制，每一个数据库对应创建他的域名，网页只能访问同源下的数据库。存储空间大。支持二进制存储。
他的操作是请求响应模式：
建立打开 IndexedDB ----window.indexedDB.open("testDB")
这条指令并不会返回一个 DB 对象的句柄，我们得到的是一个 IDBOpenDBRequest 对象，
而我们希望得到的 DB 对象在其 result 属性中 除了 result，IDBOpenDBRequest 接口定义了几个重要属性:
onerror: 请求失败的回调函数句柄 onsuccess:请求成功的回调函数句柄 onupgradeneeded:请求数据库版本
变化句柄
<script>
function openDB(name) {
var request = window.indexedDB.open(name); //建立打开
IndexedDB request.onerror = function (e) {
console.log("open indexdb error");
};
request.onsuccess = function (e) {
myDB.db = e.target.result; //这是一个 IDBDatabase 对象，这就是 IndexedDB 对象
console.log(myDB.db); //此处就可以获取到 db 实例 };
}
var myDB = { name: "testDB", version: "1", db: null };
openDB(myDB.name);
</script>
总结：
Web Storage 是 HTML5 专门为浏览器存储而提供的数据存储机制，不与 服务端发生通信 IndexedDB 用于客户端存储大量结构化数据