客户端存储技术笔记

【推荐】2019 Java 开发者跳槽指南.pdf(吐血整理) >>>

一、cookie
1.使用限制
根据统计表明，每个域名50个、大小总计4KB的Cookie是安全的，更多的cookie使用需要进行评估。
2.通常的用法如：
1)写入cookie
document.cookie = "name=value";
指定过期时间和可以访问的域名
document.cookie = "name=Raymond; expires=Fri, 31 Dec 9999 23:59:59 GMT;domain=app.foo.com";
document.cookie = "age=43";
2)读取cookie
document.cookie
"name=value;age=43" 得到以分号分隔的字符串
二、web存储API
1.使用限制
1)Web存储有两个版本：本地存储（Local Storage）和会话存储（Session Storage）。两者使
用完全相同的API，但本地存储会持久存在（或者直到用户清除），而会话存储只要浏览器
关闭就会消失。Web存储API官方规范的网址为 http://www.w3.org/TR/webstorage。
2)Web存储是与域名一一对应的。和Cookie不同的是，无法让app.foo.com使用www.foo.com存储的数据。
（可以借助iframe变通实现，但比较复杂。）
3)Web存储的限制没有标准，但一般为5~10MB。
4)Web存储仅支持字符串数据。可以将对象先转码成JSON字符串。
5)Web存储支持IE8及以上版本。
2.通用API
• localStorage.setItem：设置特定键的值
• localStorage.getItem：检索特定键的值
• localStorage.removeItem：删除键及与其关联的值
• localStorage.clear：删除所有的键/值对（只限于本域名）
示例代码：
if(window.localStorage){
   var numHits = localStorage.getItem("numHits");
   if(!numHits){numHits=0;}else{numHits = parseInt(numHits, 10);//注意只能存储成字符串}
   numHits++;
   localStorage.setItem("numHits",numHits);
}
3.事件监听
事件监听只有在浏览器的另一个实例修改存储时，才会被触发。即同时打开多个浏览器窗口。
示例：
$(window).on("storage", function(e) {
   console.dir(e);
});
e的值为：
key   设置或删除或修改的键。调用clear()时，则为null。
oldValue   改变之前的旧值。如果是新增元素，则为null。
newValue   改变之后的新值。如果是删除元素，则为null。
storageArea   该属性是一个引用，指向发生变化的sessionStorage或localStorage对象
url   触发这个改变事件的页面的URL

三、IndexedDB
1.使用限制
1)IndexedDB需要IE10及以上版本， ISO不支持IndexedDB。
2)官方规范的网址为 http://www.w3.org/TR/IndexedDB/
3)IndexedDB也和域名对应的，它的存储空间相当大。
响应的兼容报告可以在CanIUse.com查看
2.IndexedDB是一种轻量的对象存储数据库，支持索引。
是否支持检测示例：
function idbOK() {
   return "indexedDB" in window &&
   !/iPad|iPhone|iPod/.test(navigator.platform);
}
打开数据库示例
$(document).ready(function() {
   //不支持？偷偷撇撇嘴
   if(!idbOK()) return;
   var openRequest = indexedDB.open("ora_idb1",1);
   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);
   }
});
创建存储对象(表)
openRequest.onupgradeneeded = function(e) {
   var thisDB = e.target.result;
   console.log("running onupgradeneeded");
   if(!thisDB.objectStoreNames.contains("firstOS")) {
       console.log("makng a new object store");
       thisDB.createObjectStore("firstOS");
   }
}
其他略

四、WebSQL
WebSQL规范已经废弃，不推荐继续使用。

五、客户端存储简化工具库
1.Lockr，它封装了Web存储API，只用2.5K。
2.Dexie简化IndexedDB操作。
3.localForage对IndexedDB、Web SQL和本地存储进行了封装，提供统一的API，
在默认情况下，localForage会首先尝试IndexedDB，然后是Web SQL，最后是本地存储。
4.PouchDB 支持数据同步
5.lawnchair通过适配器 API 支持多种存储方法。

客户端存储技术笔记 ISBN 978-7-115-45014-2

来源：oschina

链接：https://my.oschina.net/dajianguo/blog/3147628

标签

webSQL

indexeddb

localforage

Lockr

pouchdb