一、本地存储
本地存储可分为4类
Local Storage ：永久存储：数据将保持在硬盘中，即使浏览器被关闭了，该数据仍然存在，
下次打开浏览器访问该网站时仍然可以继续使用
Session Storage ：临时存储：数据会随着浏览器的关闭而消失。
Indexed Database：NOSql，相当于一个key和value的集合，实现了NOSql的存储方式
Web SQL Database：实现了传统的基于sql语句的数据库操作，关系数据库
1、提交表单发送到服务器的信息
1)、带name的可用表单元素
2)、url
3)、客户端请求头部信息
4)、cookie
2、客户端本地存储概要
顾名思义客户端本地存储就是将信息存储在客户端电脑上，cookie就是一种典型的传统客户端存储，长期以来本地存储能力一直是桌面应用区别于Web应用的一个主要优势，作为Web应用程序而言，新一代的HTML标准对数据的本地存储提出了更高的要求。传统的Web数据存储方式一直来使用的是Cookie,但Cookie有以下缺陷:
a)、cookie会被附加在每个HTTP请求中，所以无形中增加了流量。
b)、由于在HTTP请求中的cookie是明文传递的，所以安全性成问题。
c)、Cookie的大小限制在4 KB左右,容量达不到要求。
HTML5中的Web Storage，称为Web本地存储，在Web客户端储存数据的功能,用键值对的形式保存数据，曾经属于HTML5的规范，目前已经被独立出来形成单独的规范体系。本地存储优势:
a)、统一的标准，兼容性高(IE8、各大浏览器支持)
b)、数据存储量大
c)、无需安装插件
d)、减少网络流量
e)、更加适合移动端
HTML5 提供了四种在客户端存储数据的新方法，即localStorage 、sessionStorage、globalStorage、Web Sql Database。 前面三个适用于存储较少的数据,而Web Sql Database适用于存储大型的，复杂的数据，我习惯把前面的三个称之为小存储。 IE8、Firefox3.6、Chrome5、Safari4、Opera10，事实证明各个浏览器在API方面的实现基本上一致，存在一定的兼容性问题，但不影响正常使用。
在chrome浏览器中可以使用开发者工具查看到各种不同的本地存储方式，如下图所示：
Web SQL Database 和 Indexed Database 都是在客户端存储大量结构化数据的解决方案。Web SQL Database 实现了传统的基于 SQL 语句的数据库操作，而 Indexed Database 实现了 NoSQL 的存储方式。
Web Storage 这种用于存储 (key, value)，一般两者都是字符串；
IndexDB 是增强型的 Web Storage，也是存储 (key, value);
Web SQL 则是 SQLite，一个完整的关系型数据库，可以执行 SQL。
WebSQL是SQLite在浏览器中的实现，所以它是一种关系型数据库。由于W3C对其规范定义不够理想，各家浏览器有各自实现，有浏览器兼容问题；
IndexDB是一种key-value类型的非关系数据库（NoSQL)
3、客户端操作Cookies
1.3.1、获得操作cookies的库
https://github.com/js-cookie/js-cookie
1.3.2、操作cookies
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Cookie</title> </head> <body> <input type="button" name="add" id="add" value="添加" /> <input type="button" name="get" id="get" value="读取" /> <input type="button" name="remove" id="remove" value="清除" /> <script src="js/js.cookie-2.1.3.min.js" type="text/javascript" charset="utf-8"></script> <script src="../js/jquery-1.11.3.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> $("#add").click(function(){ Cookies.set('name','小明',{expires:7}); }) $("#get").click(function(){ alert(Cookies.get('name')) }) $("#remove").click(function(){ Cookies.remove('name') }) </script> </body> </html>
结果：
添加的结果：
读取的结果：
清除的结果：
4、localStorage
说明：将数据保存在客户端本地的硬件设备（通常指硬盘，但也可以是其他硬件设备）中，即使浏览器被关闭了，该数据仍然存在，下次打开浏览器访问网站时仍然可以继续使用。
操作localStorage
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>本地永久存储：localStorage</title> </head> <body> <input type="button" value="添加" onclick="add()"/> <input type="button" value="读取" onclick="get()"/> <input type="button" value="删除" onclick="del()"/> <script type="text/javascript"> //添加 function add(){ //方法一 localStorage.setItem("name1","张三"); localStorage.setItem("1","张三1"); //方法二 localStorage["name2"]="李四"; //方法三 localStorage.name3="王五"; //存储对象 var str={name:"赵六",age:18} //序列化：把对象转换为String（因为JSON只能存储String） localStorage.str=JSON.stringify(str); } //读取 function get(){ //方法一 console.log(localStorage.getItem("name1")); //方法二 console.log(localStorage["name2"]); //方法三 console.log(localStorage.name3); //读取对象 //反序列化 var str=JSON.parse(localStorage.str) console.log(str.name); console.log(str.age); console.log(str); } //删除 function del(){ //根据Key值删除 localStorage.removeItem("name") //删除所有 localStorage.clear(); } </script> </body> </html>
结果：
添加的结果：
读取的结果：
移除的结果：
5、sessionStorage
将数据临时保存在客户端session对象中。session对象就是会话对象，session中存储的数据独立于每个客户，该数据会随着浏览器的关闭而消失。
sessionStorage的操作api与localStorage基本一样，在不手动清除的情况下localStorage永久保存，而sessionStorage只是临时暂存。
sessionStorage使用
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>本地临时存储：sessionStorage</title> </head> <body> <input type="button" value="添加" onclick="add()"/> <input type="button" value="读取" onclick="get()"/> <input type="button" value="删除" onclick="del()"/> <script type="text/javascript"> //添加 function add(){ //方法一 sessionStorage.setItem("name1","张三"); sessionStorage.setItem("1","张三1"); //方法二 sessionStorage["name2"]="李四"; //方法三 sessionStorage.name3="王五"; //存储对象 var str={name:"赵六",age:18} //序列化：把对象转换为String（因为JSON只能存储String） sessionStorage.str=JSON.stringify(str); } //读取 function get(){ //方法一 console.log(sessionStorage.getItem("name1")); //方法二 console.log(sessionStorage["name2"]); //方法三 console.log(sessionStorage.name3); //读取对象 //反序列化 var str=JSON.parse(sessionStorage.str) console.log(str.name); console.log(str.age); console.log(str); } //删除 function del(){ //根据Key值删除 sessionStorage.removeItem("name") //删除所有 sessionStorage.clear(); } </script> </body> </html>
结果：
添加的结果：
读取的结果：
删除的结果：
Web本地存储事件监听
当程序修改localStorage与sessionStorage时将触发全局事件。
当setItem(),removeItem()或者clear() 方法被调用，并且数据真的发生了改变时，就会触发storage事件,如果需要进行监听数据处理，通过以下方法:
window.addEventListener(event,handleEvent, capture)
event:设置成storage
handleEvent:事件处理函数
capture:事件处理顺序，一般设置成false,表示采用冒泡方式处理
handleEvent处理事件的函数会接收到一个StorageEvent对象，该对象有以下属性:
key:被修改的键。
oldValue:修改前的值（如果是增加新的键值，则该属性为null）
newValue:修改后的值（如果是删除键值，则该属性为null）
url/uri:触发当前存储事件的页面的url
注意：storage改变的时候，触发这个事件会调用所有同域下其他窗口的storage事件，不过它本身触发storage即当前窗口是不会触发这个事件的（当然ie这个特例除外，它包含自己本事也会触发storage事件）
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>获得localStorage的值</title> </head> <body> <script type="text/javascript"> console.log(localStorage.price); window.addEventListener("storage",function(obj){ alert(obj.oldValue+","+obj.newValue+","+obj.url); },true); </script> </body> </html>
运行结果如下：
3.3、cookie、sessionStorage、localStorage比较
