该文章目录
使用cookie
使用Web存储
使用indexDB
使用Web SQL
使用库简化
示例程序
说明：
《客户端存储技术》是一本mini 书，只有100来页。如果对于客户端存储方面不了解的可以看看这本，作者讲得很简洁明了，没有涉及太深的东西。当然，如果了解过客户端存储技术，而且知道indexDB，那么没必要读这本书了。入手这本书不到几天就刷完了，也乘此机会做下总结，希望同时也对其他人有所作用。
1.cookie
cookie是什么这里就不赘述了，不了解的自行百度吧！
创建：
语法：
document.cookie = "nameOfCookie=value";
示例：
document.cookie = "name=Raymond";
读取：
没有API 可以用来获取“一个”cookie,只能是把cookie都读取出来。
具体做法是：document.cookie
删除：
删除cookie只需要将其过期时间设为过去时间即可。
document.cookie = "name=Raymond; expires=Thu, 01 Jan 1970 00:00:00 GMT";
2.使用Web存储
两个版本：本地存储（Local Storage）和会话存储（Session Storage）。两者使
用完全相同的API，但本地存储会持久存在（或者直到用户清除），而会话存储只要浏览器
关闭就会消失。因为大多数人都使用持久化版本，所以大多数开发人员使用（和谈论）的
都是本地存储。
4个API：
localStorge.setItem:设置特定键值；
localStorge.getItem:检索特定的键值；
localStorge.removeItem:删除键值及其相关联的值；
localStorge.clear:删除所有的键值（只限定于发出请求的特定域名）
浏览器支持建议：
3.使用indexDB
IndexedDB 是一个功能强大且高度灵活的存储系统。
你可以使用它在用户浏览器中存储你希望存储的任何数据。不过，出色的功能和灵活性致
使其API 不像Web 存储那么友好。你还会发现，移动端浏览器对IndexedDB 的支持还不
是很好，即使支持，其实现方式也很糟糕（iOS 8 对IndexedDB 的支持尤其差，你最好当
它不支持）。不过，IndexedDB 将来可能会成为在客户端存储大量数据的标准方法。更多了解可以查看indexDB 规范
检查是否支持：
function idbOK(){
return "indexDB" in window &&
!/ipad/iphone/ipod/.test(navigator.platform);
}
使用：
1.
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);
}
});
2.
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);
}
});
3.
//定义主键
somedb.createObjectStore("people", {keyPath: "email"});//创建了一个名为people 的对象存储，并假定每条数据都包含一个名为email 的唯一
属性
somedb.createObjectStore("notes", {autoIncrement:true});//该示例创建了一个名为notes 的对象存储，并使用一个自增值自动为主键赋值
somedb.createObjectStore("logs", {keyPath: "id", autoIncrement:true});//创建了一个名为logs 的对象存储。这一次，使用自增值并将其存储在一个名为id
的属性中
4.
objectStore.createIndex("name of index", "path", options);//第一个参数是索引名称，第二个参数是你希望索引的数据属性
//，第一个索引建在性别属性上，让你可以根据人的性别获取数据。第二个索
引建在社会保障号属性上，并且是唯一的
objectStore.createIndex("gender", "gender", {unique:false});
objectStore.createIndex("ssn", "ssn", {unique:true});
5.
//操作数据
someObjectStore.add(data, somekey);//增加
someObjectStore.get(primaryKey);//获取
someObjectStore.put(data);//更新
someObjectStore.delete(primaryKey);//删除
此外还有获取全部数据和使用索引等东西。
浏览器支持建议：
4.使用Web SQL
说明：
这是一个已经废弃或即将废弃的规范，可以忽略这部分内容。
//检查支持与否
function webSQLOK() {
return "openDatabase" in window;
}
db = window.openDatabase("name","1","nice name",510241024);//打开数据库
db.readTransaction(function to do stuff, error handler, success handler);//打开一个只读事务
5.使用库简化
作者推荐的有：
Lockr
Dexie
localForage
PouchDB
lawnchair
等等
6.示例
作者最后一章讲述了如何构建一个真实的程序。详情参见源码。
PS：
源码jquery是使用连接的，连接可能被墙，可以自己外联jquery库。
本地存储应用：可以储存用户信息，比如表格信息，评论内容等等，以与优化用户体验。
以上