localStorage sessionStorage 和cookie
localStorage
localStorage是本地存储的,除非清空本地数据
localStorage不会自动把数据发给服务器，仅在本地保存。
localStorage只能存字符串,任何类型存储的时候都会被自动转换成字符串
使用方式(localStorage是window的属性)
设置localStorage键值对
localStorage.name = 'zhangsan';//存储一个键值对
localStorage.name = 'lisi';//name新值会覆盖旧值
localStorage['年龄'] = 23;//key是中文就使用这种方式
localStorage['404'] = '你迷路了';//key是数字就用这种方式
localStorage.setItem('email','chentging@aliyun.com');//使用setItem函数创建一个键值对
根据localStorge键取用值
console.log(localStorage.name);
console.log(localStorage['年龄']);
console.log(localStorage['404']);
console.log(localStorage.getItem('name'));
//通过key()函数获取键值对中的key
console.log(localStorage.key(index));
清除localStorage
//清除特定的键值对
console.log(localStorage.removeItem('name'));//清除name的值
//清除所有键值对
localStorage.clear();
sessionStorage
sessionStorage只伴随着session，窗口一旦关闭就没了
sessionStorage不会自动把数据发给服务器，仅在本地保存。
sessionStorage不在不同的浏览器窗口中共享，即使是同一个页面
localStorage只能存字符串,任何类型存储的时候都会被自动转换成字符串
使用方式(localStorage是window的属性)
设置,取值,清除都和localStorage完全一样
Web SQL Database
简介
Web SQL DatabaseAPI实际上未包含在HTML 5规范之中，它是一个独立的规范，它引入了一套使用SQL操作客户端数据库的API，这些API有同步的，也有异步的，同步版本的API只在工作线程（Worker Threads）上有用，由于并不是所有的浏览器都支持工作线程，一般情况下，都会使用异步API。它的核心方法有三个：openDatabase，transaction和executeSql。这些API已经被广泛的实现在了不同的浏览器里，尤其是手机端浏览器。虽然W3C官方在2011年11月声明已经不再维护Web SQL Database规范，但由于其广泛的实现程度，了解这些API对 Web开发还是非常有必要的
Web SQL Database核心方法介绍
openDatabase()方法打开一个已经存在的数据库连接，如果数据库不存在，则创建一个新的数数据库
var db = openDatabase('mydb','1.0','my database',1024*1024);
4个参数的意义（数据库名、版本号、数据库说明、数据库大小单位byte(数据库大小可变)、创建回滚）
注意:如果数据库已经创建，第五个参数将会进行回滚操作。如果省略此参数，仍能创建
用database.transaction()方法执行SQL语句,该函数只有一个参数是负责执行查询的函数
查询函数有一个事务类型的参数tx
事务参数tx具有一个函数:executeSql(),这个函数有4个参数
表示查询的SQL字符串
插入到查询SQL字符串中问号所在处的字符串参数
查询执行成功时执行的函数
查询失败时执行的函数
执行成功的函数有两个参数:tt,事务性参数;result,执行的返回结果
执行错误的函数也有两个:tt,事务性参数,error,错误的对象
实例:
var db = openDatabase('mydb','1.0','my database',1024*1024);
if (db) {} //可以判断是否成功连接上数据库
db.transaction(function(tx) {
//创建一个表
tx.executeSql('create table if not exists accountTab(name TEXT,age INTEGER,email TEXT)',[],
function() {},
function(tx,error) {
console.log(error.source + ':' +error.message);//遇到错误打印出错误信息
});
//插入数据
tx.executeSql('insert into accountTab values(?,?,?)',['zhangsan',23,'chentging@aliyun.com']);
//查询数据
tx.executeSql('select * from accountTab',[],function(tt,rs) {
//循环结果集
for(var i = 0; i < rs.rows.length;i++) {
console.log(rs.rows);//输出结果集
}
});
});
cookie
cookie数据始终在同源的http请求中携带（即使不需要）,即cookie在浏览器和服务器间来回传递
cookie数据还要路径(path)的概念,可以限制cookie只属于某个路径下
存储大小有限制,cookie数据不能超过4K,因为每次http请求都会携带cookie,所以cookie适合保存很小的数据
sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大
cookie只在设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭
cookie的应用
- 保存用户登录状态:例如将用户id存储于一个cookie内，这样当用户下次访问该页面时就不需要重新登录了，现在很多论坛和社区都提供这样的功能。 cookie还可以设置过期时间，当超过时间期限后，cookie就会自动消失
定制页面。如果网站提供了换肤或更换布局的功能，那么可以使用cookie来记录用户的选项，例如：背景色、分辨率等。当用户下次访问时，仍然可以保存上一次访问的界面风格。
创建购物车。正如在前面的例子中使用cookie来记录用户需要购买的商品一样，在结账的时候可以统一提交。例如淘宝网就使用cookie记录了用户曾经浏览过的商品，方便随时进行比较
cookie localStorage sessionStorage比较
传递方式
cookie数据始终在同源的http请求中携带（即使不需要），即cookie在浏览器和服务器间来回传递
sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存
数据大小
cookie数据还有路径（path）的概念，可以限制cookie只属于某个路径下
存储大小限制也不同，cookie数据不能超过4k，同时因为每次http请求都会携带cookie，所以cookie只适合保存很小的数据
sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大
数据有效期
sessionStorage：仅在浏览器窗口(或者标签页)关闭前有效(即:窗口关闭之前满足同源策略下都有效果)
所以你刷新这个页面前进后退(前进后退得保证同源策略)
localStorage：始终有效，窗口或标签页关闭也一直保存(除非主动删除数据)，因此用作持久数据
cookie只在设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭
作用域不同
sessionStorage每个窗口的值都是独立的（每个窗口都有自己的数据），它的数据会随着窗口的关闭而消失，窗口间的sessionStorage也是不可以共享的(就是,你再打开一个标签页,同样的地址,也不会共享)
localStorage 在所有同源页面中都是共享的(前提是相同浏览器,别一个是谷歌浏览器,一个火狐浏览器,然后打开同一个页面说不是共享的哈哈)也就是能跨页不能跨域
cookie也是在所有同源窗口中都是共享的
cookie的封装,我推荐大家使用cookie相关的插件(当然有时间也可以自己封装,网上也很多)
http://www.cnblogs.com/jicheng/p/5946460.html
http://www.cnblogs.com/kissdodog/archive/2012/12/14/2818827.html
http://blog.csdn.net/canglingyue/article/details/52386196
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事件）
