localStorage sessionStorage 和cookie等前端存储方式总结

localStorage sessionStorage 和cookie

localStorage

localStorage是本地存储的,除非清空本地数据

localStorage不会自动把数据发给服务器，仅在本地保存。

localStorage只能存字符串,任何类型存储的时候都会被自动转换成字符串

使用方式(localStorage是window的属性)

1. 设置localStorage键值对

   localStorage.name = 'zhangsan';//存储一个键值对

   localStorage.name = 'lisi';//name新值会覆盖旧值

   localStorage['年龄'] = 23;//key是中文就使用这种方式

   localStorage['404'] = '你迷路了';//key是数字就用这种方式

   localStorage.setItem('email','chentging@aliyun.com');//使用setItem函数创建一个键值对

2. 根据localStorge键取用值

   console.log(localStorage.name);
   
   console.log(localStorage['年龄']);
   
   console.log(localStorage['404']);
   
   console.log(localStorage.getItem('name'));
   
   //通过key()函数获取键值对中的key
   
   console.log(localStorage.key(index));

3. 清除localStorage

   //清除特定的键值对
   
   console.log(localStorage.removeItem('name'));//清除name的值
   
   //清除所有键值对
   
   localStorage.clear();

sessionStorage

sessionStorage只伴随着session，窗口一旦关闭就没了

sessionStorage不会自动把数据发给服务器，仅在本地保存。

sessionStorage不在不同的浏览器窗口中共享，即使是同一个页面

localStorage只能存字符串,任何类型存储的时候都会被自动转换成字符串

使用方式(localStorage是window的属性)

设置,取值,清除都和localStorage完全一样

Web SQL Database

1. 简介

    Web SQL DatabaseAPI实际上未包含在HTML 5规范之中，它是一个独立的规范，它引入了一套使用SQL操作客户端数据库的API，这些API有同步的，也有异步的，同步版本的API只在工作线程（Worker Threads）上有用，由于并不是所有的浏览器都支持工作线程，一般情况下，都会使用异步API。它的核心方法有三个：openDatabase，transaction和executeSql。这些API已经被广泛的实现在了不同的浏览器里，尤其是手机端浏览器。虽然W3C官方在2011年11月声明已经不再维护Web SQL Database规范，但由于其广泛的实现程度，了解这些API对 Web开发还是非常有必要的
   

2. Web SQL Database核心方法介绍

   • openDatabase()方法打开一个已经存在的数据库连接，如果数据库不存在，则创建一个新的数数据库

       var db = openDatabase('mydb','1.0','my database',1024*1024);
     

   4个参数的意义（数据库名、版本号、数据库说明、数据库大小单位byte(数据库大小可变)、创建回滚）

    注意:如果数据库已经创建，第五个参数将会进行回滚操作。如果省略此参数，仍能创建
   

   • 用database.transaction()方法执行SQL语句,该函数只有一个参数是负责执行查询的函数
   • 查询函数有一个事务类型的参数tx
   • 事务参数tx具有一个函数:executeSql(),这个函数有4个参数

     1. 表示查询的SQL字符串

     2. 插入到查询SQL字符串中问号所在处的字符串参数

     3. 查询执行成功时执行的函数

     4. 查询失败时执行的函数

     5. 执行成功的函数有两个参数:tt,事务性参数;result,执行的返回结果

     6. 执行错误的函数也有两个: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的应用

1. 保存用户登录状态:例如将用户id存储于一个cookie内，这样当用户下次访问该页面时就不需要重新登录了，现在很多论坛和社区都提供这样的功能。 cookie还可以设置过期时间，当超过时间期限后，cookie就会自动消失
2. 定制页面。如果网站提供了换肤或更换布局的功能，那么可以使用cookie来记录用户的选项，例如：背景色、分辨率等。当用户下次访问时，仍然可以保存上一次访问的界面风格。
3. 创建购物车。正如在前面的例子中使用cookie来记录用户需要购买的商品一样，在结账的时候可以统一提交。例如淘宝网就使用cookie记录了用户曾经浏览过的商品，方便随时进行比较

cookie localStorage sessionStorage比较

1. 传递方式

   • cookie数据始终在同源的http请求中携带（即使不需要），即cookie在浏览器和服务器间来回传递

   • sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存

2. 数据大小

   • cookie数据还有路径（path）的概念，可以限制cookie只属于某个路径下

   • 存储大小限制也不同，cookie数据不能超过4k，同时因为每次http请求都会携带cookie，所以cookie只适合保存很小的数据

   • sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大

3. 数据有效期

   • sessionStorage：仅在浏览器窗口(或者标签页)关闭前有效(即:窗口关闭之前满足同源策略下都有效果)

     • 所以你刷新这个页面前进后退(前进后退得保证同源策略)

   • localStorage：始终有效，窗口或标签页关闭也一直保存(除非主动删除数据)，因此用作持久数据

   • cookie只在设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭

4. 作用域不同

   • sessionStorage每个窗口的值都是独立的（每个窗口都有自己的数据），它的数据会随着窗口的关闭而消失，窗口间的sessionStorage也是不可以共享的(就是,你再打开一个标签页,同样的地址,也不会共享)

   • localStorage 在所有同源页面中都是共享的(前提是相同浏览器,别一个是谷歌浏览器,一个火狐浏览器,然后打开同一个页面说不是共享的哈哈)也就是能跨页不能跨域

   • cookie也是在所有同源窗口中都是共享的

5. 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事件）