[学习交流] 浏览器存储及使用

伴随着WEB的发展，浏览器的存储方式及技术不断的发生更改，从刚开始的cookie，到localstorage，sessionStorage，再到IndexedDB，再到现在的Web SQL，作为一名合格的前端开发，当然需要对这些技术了如指掌并熟练掌握，本文将比较全面的介绍常见的浏览器存储以及其使用。

1.Cookie

Cookie是一个用户通过浏览器浏览网站产出的信息的票根，Cookies通常被用来标示一个网站用户的浏览经历，它可能包含这个用户的个人偏好或访问这个网站的一些输入信息。用户可以自己随意操作他们浏览器中的Cookie。
Cookies 可以通过服务端使用 Set-Cookie Http header来设置和修改，当然也可以使用javascript的document.cookie去操作。

2.Web Storage

Web Storage有两种机制，分别为sessionStorage和localStorage。
sessionStorage用于本地存储一个会话（session）中的数据，这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage是一种半持久化的本地存储（会话级别的存储），而localStorage用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。

这两个对象，对外的方法主要有: setItem，getItem，以键值对的形式存储和读取，key按照索引获取当前存储的key值，找不到时返回null，length属性代表当前存储的key，value对数

3.IndexDB

IndexedDB 是一个为了能够在客户端存储可观数量的结构化数据，并且在这些数据上使用索引进行高性能检索的 API。

IndexedDB 分别为同步和异步访问提供了单独的 API ，异步 API 方法调用完后会立即返回，而不会阻塞调用线程。

要异步访问数据库，要调用 window 对象 indexedDB 属性的 open() 方法。该方法返回一个 IDBRequest 对象 (IDBOpenDBRequest)；异步操作通过在 IDBRequest 对象上触发事件来和调用程序进行通信。

IndexDb是NoSQL数据库，是一种支持事务的浏览器数据库，基本操作就是，打开数据库，增删改查各种。

4.WebSql

Web SQL Database API实际上未包含在HTML 5规范之中，它是一个独立的规范，它引入了一套使用SQL操作客户端数据库的API，这些API有同步的，也有异步的，一般情况下，都会使用异步API。它的核心方法有三个：openDatabase，transaction和executeSql。这些API已经被广泛的实现在了不同的浏览器里，尤其是手机端浏览器。虽然W3C官方在2011年11月声明已经不再维护Web SQL Database规范，但由于其广泛的实现程度，了解这些API对 Web开发还是非常有必要的。

代码示例

[AppleScript] 纯文本查看 复制代码

var db; 
var info = {
    dbName :"MyDataBase"，//数据库名称
    dbVersion:"0.1"，//版本
    dbDisplayName:"测试数据库"，//显示名称
    dbEstimatedSize:10*1024*1024 //数据库大小，单位字节
};

db = window.openDatabase(info.dbName，info.dbVersion，info.dbDisplayName，info.dbEstimatedSize);

//初始化students表
db.transaction(function (trans) {
    //执行Sql，如果students表不存在，则创建改表
    trans.executeSql("create table if not exists students(id unique，name text null，email text null)"，[]， function () {
        console.log("init success");
    }， function () {
        console.log("error happen");
    });
});


//插入数据
db.transaction(function (trans) {
    trans.executeSql("insert into students(name，email) values(?，?)"，['xiaoming'，'1@qq.com']， function () {
        console.log("insert ok 1");
    }， function () {
        console.log(arguments);
    });
    trans.executeSql("insert into students(name，email) values(?，?)"，['xiaohong'，'2@qq.com']，function () {
        console.log("insert ok 2");
    }， function () {
        console.log(arguments);
    });
});

//删除数据
db.transaction(function (trans) {
   trans.executeSql("delete from students where name = ? "，['xiaohong']， function (trans，result) {
       console.log("delete success");
   }， function (trans，message) {
       console.log("error happen");
   });
});

//查询数据
db.transaction(function (trans) {
    trans.executeSql("select * from students"，[]， function (trans，result) {
        console.log("总共查询到 "+result.rows.length+" 条数据");
    }， function (trans，message) {
        console.log("error happen");
    });
});

小结

目前Cookie的兼容性最好，使用的最广泛，但有被滥用的趋势。Web Storage 兼容比较好，除了老板的IE 6，7不支持外，其他主流浏览器都已经支持了，使用起来也方便简单，适合存储键值对数据。WebSql由于未在HTML5规范中，前景堪忧，适当了解下。IndexDb目前来看，兼容性不太好，但是前景很好，目前由w3c在推广，相信在以后应该有个大爆发(个人看法)。
Application Cache目前已经被废弃，Service Workers目前属于起步阶段，感觉离实用还需要时间。

帐号		自动登录	找回密码
密码			加入黑马

[学习交流] 浏览器存储及使用

0 个回复

浏览过的版块