PS:这里讲web存储,主要是在客户端存储的一些技术:cookie,localstorage,sessionstorage,WebSQL。  
 
Cookie
 
Cookie是HTML4中在客户端存储简单用户信息的一种方式,它的应用很多所以有必要回顾一下。它使用文本来存储信息,当有应用程序使用cookie时,服务器端就会发送cookie到客户端。客户端浏览器将保存该信息。下一次页面请求时,客户端浏览器就会把cookie发送到服务器。 
 
优缺点:
1、简答易用。
2、浏览器负责发送数据。
3、浏览器自动管理不同站点的cookie。
缺点:
1.使用简单文本存储数据,所以cookie的安全性很差。cookie保存在客户端浏览器,很容易被客户端盗取。
2.Cookie的存储数据容量有限。上限为4kb。
3.cookie存储的数量有限,多数浏览器上限为30或50个,ie6只支持每个域名存储20个cookie。
4.如果浏览器的安全配置为最高,cookie将失效。
5.cookie不适合大量数据的存储,因为cookie会由每个对服务器的请求来传递,从而造成cookie速度缓慢效率低下。
简单的设置或获取cookie
 function setCookie(name, value, expiredays) {
var date = new Date();
date.setDate(date.getDate() + expiredays);
document.cookie = name + "=" + escape(value) + ((expiredays == null) ? "" : ";expires=" + date.toGMTString());
}
setCookie('username', 'Darren', 30);
function getCookie(name) {
if (document.cookie.length > 0) { 
var start = document.cookie.indexOf(name + "=");  //通过String对象的indexOf()来检查这个cookie是否存在,不存在就为 -1  
if (start != -1) {
start = start + name.length + 1; //最后这个+1其实就是表示"="号啦,这样就获取到了cookie值的开始位置
var end = document.cookie.indexOf(";", start);// indexOf()第二个参数表示指定的开始索引的位置
if (end == -1) end = document.cookie.length;
return unescape(document.cookie.substring(start, end)); //通过substring()得到了值。想了解unescape()得先知道escape()是做什么的,都是很重要的基础
}
}
return "";
}

也有Jquery.cookie.js可以用

jQuery.cookie = function(name, value, options) {
if (typeof value != 'undefined') { // name and value given, set cookie
options = options || {};
if (value === null) {
value = '';
options.expires = -1;
}
var expires = '';
if (options.expires && (typeof options.expires == 'number' || options.expires.toUTCString)) {
var date;
if (typeof options.expires == 'number') {
date = new Date();
date.setTime(date.getTime() + (options.expires * 24 * 60 * 60 * 1000));
} else {
date = options.expires;
}
expires = '; expires=' + date.toUTCString(); // use expires attribute, max-age is not supported by IE
}
var path = options.path ? '; path=' + options.path : '';
var domain = options.domain ? '; domain=' + options.domain : '';
var secure = options.secure ? '; secure' : '';
document.cookie = [name, '=', encodeURIComponent(value), expires, path, domain, secure].join('');
} else { // only name given, get cookie
var cookieValue = null;
if (document.cookie && document.cookie != '') {
var cookies = document.cookie.split(';');
for (var i = 0; i < cookies.length; i++) {
var cookie = jQuery.trim(cookies[i]);
// Does this cookie string begin with the name we want?
if (cookie.substring(0, name.length + 1) == (name + '=')) {
cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
break;
}
}
}
return cookieValue;
}
};
 $.cookie('the_cookie', 'the_value', { expires: 7, path: '/', domain: 'cnblogs.com'});//设置
var cc = $.cookie('the_cookie');//获取
$.cookie('the_cookie', null);//删除

Web Storage

HTML5 中的Web Storage提供了两种在客户端存储数据的方法,即localStorage和sessionstorage。
localstorage是用于持久化的本地存储,除非主动删除数据,负责数据是永远不会过期的。localstorage的机制和Cookie相似,都是key-value的形式存储,对I/O进行操作;sessionstorage是将数据保存在session对象中,用户关闭浏览器,数据就会删除。不是一种持久化的本地存储,仅仅是会话级别的存储。
两者实现的接口相同。
interface Storage{
readonly attribute unsigned long length;
getter DOMString key(in unsigned long index);
getter any getItem(in DOMString key,in any data);
deleter void removeItem(in DOMString key);
void clear();
}

优缺点

1、IE8下,每个独立的存储空间为10M,其他浏览器略有不同,但有比cookie要大很多。
2、内容不会发送到服务器。
3、更多丰富易用的接口,使得数据的操作更为简便。
缺点:
1.浏览器会为每个域分配独立的存储空间。域A是无法访问到域B的存储空间。
2.本地数据未加密而且永远不会过期,极易造成隐私泄露。
用法:
  window.sessionStorage.setItem('mykey', 'niqiu');
window.sessionStorage.nikey = 'stone';
alert(window.sessionStorage.getItem('mykey'));
alert(window.sessionStorage.nikey);

将一段Json存入localstorage:

var data = new Object();
data.name = "stoneniqiu";
data.age = "26";
var str = JSON.stringify(data);
localStorage.setItem(data.name, str); function getstone() {
var raw = localStorage.getItem("stoneniqiu");
var data = JSON.parse(raw);
alert(data.name + data.age);
}
getstone();

用LS存储用户的操作记录,个性化的代码片段。对于性能和使用范围可以看看这篇文章:让我们再谈谈浏览器资源加载优化

Web SQL

Web SQL Database 允许应用通过一个异步JavaScript接口访问SQLLite 数据库,但IE,Firefox并没有实现它,而且WHATWG也停止对Web Sql Database的开发。由于标准认定直接执行SQL语句不可取,Web Sql database 已经被索引数据库(Indexed Database)所取代。

浏览器
说明
IE
不支持
FireFox
不支持
Opera
10.5及以上支持
Chrome
3.0及以上支持
Safari
3.2及以上支持。
HTML5 数据库API主要包括3个核心方法
1.openDatabase:使用现有数据库或创建新数据库的方式创建数数据库对象。
Database openDatabase(in DOMString name,in DOMString version,in DOMString displayName,in unsigned long estimatedSize,in optional DatabaseCallback creationCallback)

参数名称不言而喻 脚本用法:

var db=openDatabase("myDb","0.1","A list of to do items",20000)

这样就创建了一个数据库。

2.transaction:允许用户根据情况控制事务提交或回滚。完整定义:

transaction.executeSql(sqlquery,[],dataHandler,errorHandler):

sqlquery 为要执行的sql语句,[]这个数组表示sql语句中使用的参数数组。所有参数先用?号代替。然后依次将这些参数放在这个数组中。

脚本用法:

db.transaction(function(tx){})

实例:

transaction.executeSql("Update people set age-? where name=?;",[age,name]);
而第三个参数表示执行成功时调用的回调函数。
function dataHandler(transaction,errmsg){}
第四个参数是SQL执行出错时的回调函数
function errorHandler(transaction,errmsg){}

3.executeSql:用于执行真实的SQL查询。

实例:

 function initdb() {
var name = ['C#', "C++", "C", "JavaScript", "Java", "PhP"];
db.transaction(function(tx) {
tx.executeSql('Create table if not exists mytable(id integer primary key autoincrement,name)');
for (var i = 0; i < name.length; i++) {
tx.executeSql('insert into mytable(name) values(?)', [name[i]]);
}
});
} initdb();

一张表包含了用 "AUTOINCREMENT" 修饰的列时, sqlite 将自动创建表 "SQLITE_SEQUENCE"。如果想清空记录,让编号归0,直接处理sqlite_sequence就可以了。

 db.transaction(function(tx) {
tx.executeSql('create table if not exists t1(id unique,log)');
tx.executeSql('insert into t1(id,log) values(1,"created a db")');
tx.executeSql('insert into t1(id,log) values(1,"a good day")');
tx.executeSql('insert into t1(id,log) values(1,"hello")');
}); //读取:
db.transaction(function(tx) {
tx.executeSql('select * from t1', [], function(tx, results) {
var len = results.rows.length, i;
var msg = "<p>共有" + len + "条记录</p>";
document.getElementById("res").innerHTML = msg;
for (i = 0; i < len; i++) {
msg = "<p><b>" + results.rows.item(i).log + "</b></p>";
document.querySelector('#res').innerHTML += msg;
}
},null);
});

IndexedDB

IndexedDB很像Nosql。能够存储可观的结构化数据,一个单独的数据库项目的大小没有限制。然而可能会限制每个 IndexedDB 数据库的大小。这个限制(以及用户界面对它进行断言的方式)在各个浏览器上也可能有所不同。比如Firefox4中一个站点超过50M,Firefox会向用户请求权限。在移动端是5M.

使用异步 API 方法调用完后会立即返回,而不会阻塞调用线程。

文档中的示例:

 var request = indexedDB.open("library");
request.onupgradeneeded = function () {
// The database did not previously exist, so create object stores and indexes.
var db = request.result;
var store = db.createObjectStore("books", { keyPath: "isbn" });
var titleIndex = store.createIndex("by_title", "title", { unique: true });
var authorIndex = store.createIndex("by_author", "author"); // Populate with initial data.
store.put({ title: "Quarry Memories", author: "Fred", isbn: 123456 });
store.put({ title: "Water Buffaloes", author: "Fred", isbn: 234567 });
store.put({ title: "Bedrock Nights", author: "Barney", isbn: 345678 });
}; request.onsuccess = function () {
db = request.result;
};

更详细的操作我这里也不赘述了,功能比较强大,支持group,filter等大家可以去看下面两篇文章。

IndexedDatabase API  http://www.w3.org/TR/IndexedDB/

HTML5本地存储:http://www.cnblogs.com/dolphinX/p/3415761.html

浏览器支持度:
 
 
小结:
本地存储方式比较多,一般的需求还是做一些个性化的存储。cookie和LS都是不错的选择,但是如果要支持离线,存储的数据可能就需要用到IndexedDb这样的存储方式了。
 
 

【读书笔记】HTML5 Web存储的更多相关文章

  1. HTML5 Web存储(Web Storage)技术及用法

    在如今的Web开发中,HTML5是大家讨论的最大一个话题.HTML5提供的新功能特征使得Web程序员如虎添翼,并免去了以往钻研各种方法来让网站更好.更快.更灵活的气力.这些新功能中有一个非常让我感兴趣 ...

  2. HTML5 web 存储

    简介: HTML5 web 存储,一个比cookie更好的本地存储方式. 首先我们先了解一下: 什么是 HTML5 Web 存储? 使用html5可以在本地存储用户的浏览数据. 早些时候,本地存储使用 ...

  3. HTML5 Web存储 页面间进行传值

    在实际使用过程中,经常会遇到需要在页面间进行传值的情况,最初设想一定需要后端才能进行数据的存储和读取,或者在本地使用一个cookie进行保存,直到了解到HTML5 Web存储 使用HTML5的新特性可 ...

  4. 面试之HTML5 Web存储

    前几天面试遇到了一个题是问localStorage和sessionStorage的区别,当时的回答不是很全面,今天就针对这个问题做一下整理(概念,用法,区别) HTML5 Web存储,一个比 cook ...

  5. HTML5: HTML5 Web 存储

    ylbtech-HTML5: HTML5 Web 存储 1.返回顶部 1. HTML5 Web 存储 HTML5 web 存储,一个比cookie更好的本地存储方式. 什么是 HTML5 Web 存储 ...

  6. 有趣的HTML5 Web 存储

    HTML5 web 存储,一个比cookie更好的本地存储方式. 什么是 HTML5 Web 存储? 使用HTML5可以在本地存储用户的浏览数据. 早些时候,本地存储使用的是 cookie.但是Web ...

  7. 读书笔记--大规模web服务开发技术

    总评        这本书是日本一个叫hatena的大型网站的CTO写的,通过hatena网站从小到大的演进来反应一个web系统从小到大过程中的各种系统和技术架构变迁,比较接地气.      书的内容 ...

  8. HTML5本地化应用开发-HTML5 Web存储详解

    文章不是简单的的Ctrl C与V,而是一个字一个标点符号慢慢写出来的.我认为这才是是对读者的负责,本教程由技术爱好者成笑笑(博客:http://www.chengxiaoxiao.com/)写作完成. ...

  9. HTML5 web存储

    既然涉及到HTML5知识,那么必定会存在一定的兼容性问题,这里就涉及到浏览器的支持情况了. 浏览器支持情况: Internet Explorer 8+, Firefox, Opera, Chrome, ...

随机推荐

  1. 我利用网上代码开发的JQuery图片插件

    我利用网上代码开发的JQuery图片插件 代码如下 (function($){ $.fn.FocusPic = function(options){ var defaults = { interval ...

  2. workflow createPath

    针对不同的流程,createpath不同,但是创建审批链,和创建表都有 1.GetUserInfoByListColumn 控件已创建的.先Rebuild,属性需要注意 2.CreateListIte ...

  3. c# datagridview 中DataSource的使用总结

    由于当前项目的窗体更新使用的是订阅事件的方式.其中有个datagridview 动态显示统计数据的列表框.本来想用textbox显示,但不规则,看起来也不美观,改由dgv显示. 我没打算用改dgv表的 ...

  4. vuex2.0.0爬坑记录 -- mutations的第一个参数state不能解构

    今天在学习vuex的过程中,遇到了一个很困扰人的问题,最终利用vuex的状态快照工具logger解决了问题. 问题是这样的,我在子组件中使用了mapState()函数来将状态映射至子组件中,使子组件能 ...

  5. Accordion - 手风琴

    //手风琴效果 <div style="overflow:hidden;height:400px;width:948px;"> <div class=" ...

  6. 浅谈城市规划在移动GIS方面的应用发展

    1.概述 城市建设进程加快,城市规划管理工作日趋繁重,各种来源的数据产生各种层出不穷的问题,严重影响城市规划时的准确性,为此全面合理的掌握好各方面的城市规划资料才能做出更加科学的决策.移动端的兴起为规 ...

  7. Oracle 服务手动启动关闭

    在windows7中安装完Oracle11g之后会出现一下七种服务:可通过运行->services.msc查看. 其中各个服务名称中的ORCL或orcl为SID即System IDentifie ...

  8. TSP旅行商问题的Hopfield求解过程

      连续型Hopfield在matlab中没有直接的工具箱,所以我们们根据Hopfield给出的连续行算法自行编写程序.本文中,以求解旅行商 问题来建立Hopfield网络,并得到解,但是该解不一定是 ...

  9. nil、Nil、NULL和NSNull的理解

    http://blog.sina.com.cn/s/blog_4930f8e60101h71b.html 其实早就想研究一下nil.Nil.NULL和NSNull之间的区别,只是工作上除了nil,其它 ...

  10. project.VERSION_NAME定义

    android { compileSdkVersion Integer.parseInt(project.ANDROID_BUILD_SDK_VERSION) buildToolsVersion pr ...