该文章目录

  • 使用cookie
  • 使用Web存储
  • 使用indexDB
  • 使用Web SQL
  • 使用库简化
  • 示例程序

说明:

《客户端存储技术》是一本mini 书,只有100来页。如果对于客户端存储方面不了解的可以看看这本,作者讲得很简洁明了,没有涉及太深的东西。当然,如果了解过客户端存储技术,而且知道indexDB,那么没必要读这本书了。入手这本书不到几天就刷完了,也乘此机会做下总结,希望同时也对其他人有所作用。

1.cookie

cookie是什么这里就不赘述了,不了解的自行百度吧!

创建:

语法:

<code>document.cookie = "nameOfCookie=value";</code>


示例:

<code>document.cookie = "name=Raymond";</code>
读取:

没有API 可以用来获取“一个”cookie,只能是把cookie都读取出来。
具体做法是:

<code>document.cookie</code>
删除:

删除cookie只需要将其过期时间设为过去时间即可。

<code>document.cookie = "name=Raymond; expires=Thu, 01 Jan 1970 00:00:00 GMT";</code>

2.使用Web存储

两个版本:本地存储(Local Storage)和会话存储(Session Storage)。两者使 用完全相同的API,但本地存储会持久存在(或者直到用户清除),而会话存储只要浏览器 关闭就会消失。因为大多数人都使用持久化版本,所以大多数开发人员使用(和谈论)的 都是本地存储。

4个API:
  • localStorge.setItem:设置特定键值;
  • localStorge.getItem:检索特定的键值;
  • localStorge.removeItem:删除键值及其相关联的值;
  • localStorge.clear:删除所有的键值(只限定于发出请求的特定域名)
浏览器支持建议:

enter image description here

3.使用indexDB

IndexedDB 是一个功能强大且高度灵活的存储系统。 你可以使用它在用户浏览器中存储你希望存储的任何数据。不过,出色的功能和灵活性致 使其API 不像Web 存储那么友好。你还会发现,移动端浏览器对IndexedDB 的支持还不 是很好,即使支持,其实现方式也很糟糕(iOS 8 对IndexedDB 的支持尤其差,你最好当 它不支持)。不过,IndexedDB 将来可能会成为在客户端存储大量数据的标准方法。更多了解可以查看indexDB 规范

检查是否支持:
<code>
function idbOK(){
    return "indexDB" in window &&
    !/ipad/iphone/ipod/.test(navigator.platform);
}
</code>
使用:

1.

<code>
function idbOK() {
return "indexedDB" in window;
}
var db;
$(document).ready(function() {
if(!idbOK()) return;
var openRequest = indexedDB.open("ora_idb1",1);//打开indexDBA

//第一次使用数据库onupgadeneeded被触发,同时表示创建完成
openRequest.onupgradeneeded = function(e) {
console.log("running onupgradeneeded");
}

//重复打开执行下面函数
openRequest.onsuccess = function(e) {
console.log("running onsuccess");
db = e.target.result;
}
openRequest.onerror = function(e) {
console.log("onerror!");
console.dir(e);
}
});
</code>

2.

<code>
function idbOK() {
return "indexedDB" in window;
}
var db;
$(document).ready(function() {
if(!idbOK()) return;
var openRequest = indexedDB.open("ora_idb2",1);
openRequest.onupgradeneeded = function(e) {
var thisDB = e.target.result;//取得数据库对象本身
console.log("running onupgradeneeded");

//利用contains方法查看对象是否存在
if(!thisDB.objectStoreNames.contains("firstOS")) {
console.log("makng a new object store");
thisDB.createObjectStore("firstOS");//创建对象
}
}

//创建成功,则
openRequest.onsuccess = function(e) {
console.log("running onsuccess");
db = e.target.result;
console.dir(db.objectStoreNames);
}

//创建失败,则
openRequest.onerror = function(e) {
console.log("onerror!");
console.dir(e);
}
});
</code>

3.

<code>
//定义主键
somedb.createObjectStore("people", {keyPath: "email"});//创建了一个名为people 的对象存储,并假定每条数据都包含一个名为email 的唯一
属性
somedb.createObjectStore("notes", {autoIncrement:true});//该示例创建了一个名为notes 的对象存储,并使用一个自增值自动为主键赋值
somedb.createObjectStore("logs", {keyPath: "id", autoIncrement:true});//创建了一个名为logs 的对象存储。这一次,使用自增值并将其存储在一个名为id
的属性中
</code>

4.

 <code>
    objectStore.createIndex("name of index", "path", options);//第一个参数是索引名称,第二个参数是你希望索引的数据属性

    //,第一个索引建在性别属性上,让你可以根据人的性别获取数据。第二个索
    引建在社会保障号属性上,并且是唯一的
    objectStore.createIndex("gender", "gender", {unique:false});
    objectStore.createIndex("ssn", "ssn", {unique:true});
    </code>

5.

 <code>
//操作数据
someObjectStore.add(data, somekey);//增加
someObjectStore.get(primaryKey);//获取
someObjectStore.put(data);//更新
someObjectStore.delete(primaryKey);//删除
此外还有获取全部数据和使用索引等东西。
</code>
浏览器支持建议:

enter image description here

4.使用Web SQL

说明:

这是一个已经废弃或即将废弃的规范,可以忽略这部分内容。

<code>
//检查支持与否
function webSQLOK() {
return "openDatabase" in window;
}
db = window.openDatabase("name","1","nice name",5*1024*1024);//打开数据库
db.readTransaction(function to do stuff, error handler, success handler);//打开一个只读事务
</code>

5.使用库简化

作者推荐的有: + Lockr + Dexie + localForage + PouchDB + lawnchair + 等等

6.示例

作者最后一章讲述了如何构建一个真实的程序。详情参见源码。

PS:

源码jquery是使用连接的,连接可能被墙,可以自己外联jquery库。 本地存储应用:可以储存用户信息,比如表格信息,评论内容等等,以与优化用户体验。

以上