客户端存储技术笔记

删除回忆录丶 提交于 2019-12-26 13:51:50

【推荐】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

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!