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

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数据始终在同源的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数据始终在同源的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事件）

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

刷新页面返回顶部

weixsun

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