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