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数据始终在同源的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记录了用户曾经浏览过的商品,方便随时进行比较
  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事件)

posted @ 2017-08-10 18:02  weixsun  阅读(1381)  评论(0编辑  收藏  举报