代码改变世界

【读书笔记】HTML5 Web存储

2015-01-09 08:03  stoneniqiu  阅读(1311)  评论(8编辑  收藏
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 "";
         }
View Code

也有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;
    }
};
View Code
 $.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这样的存储方式了。