数据缓存

Storage

存储方式
存储类型
访问限制
存储时长
适用场景
Cookie
格式化字符串
同源,可自定义访问域
自定义时长,默认为 Session 级别
用户认证信息
sessionStorage
K-V, 仅可存放字符串
同一个 Tab 下的同域名
除了本 Tab 刷新,其他全部重置
当前页面音 / 视频播放进度
localStorage
K-V, 仅可存放字符串,存储限制 4M
同域名,不同的 Tab 也可以访问
默认永久性存储
本地缓存数据
IndexedDB
文档型数据库,没有大小限制
同域名
默认永久性存储
大量本地缓存数据
Love field
关系型数据库
LokiJS
内存数据库

Cookie

如果你把 Cookies 看成为 http 协议的一个扩展的话,理解起来就容易的多了,其实本质上 cookies 就是 http 的一个扩展。有两个 http 头部是专门负责设置以及发送 cookie 的 , 它们分别是 Set-Cookie 以及 Cookie。当服务器返回给客户端一个 http 响应信息时,其中如果包含 Set-Cookie 这个头部时,意思就是指示客户端建立一个 cookie,并且在后续的 http 请求中自动发送这个 cookie 到服务器端,直到这个 cookie 过期。如果 cookie 的生存时间是整个会话期间的话,那么浏览器会将 cookie 保存在内存中,浏览器关闭时就会自动清除这个 cookie。另外一种情况就是保存在客户端的硬盘中,浏览器关闭的话,该 cookie 也不会被清除,下次打开浏览器访问对应网站时,这个 cookie 就会自动再次发送到服务器端。一个 cookie 的设置以及发送过程分为以下四步:客户端发送一个 http 请求到服务器端服务器端发送一个 http 响应到客户端,其中包含 Set-Cookie 头部客户端发送一个 http 请求到服务器端,其中包含 Cookie 头部服务器端发送一个 http 响应到客户端

sessionStorage & localStorage

SessionStorage

为了替代 Cookile 这门古老的客户端存储技术 ,Html5 的 WEB Storage Api 提供了俩中在客户端存储数据库的方法 :localStorage 和 sessionStorage 。sessionStorage 用于本地存储一个会话(session )中的数据,这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此 sessionStorage 不是一种持久化的本地存储,仅仅是会话级别的存储。而 localStorage 用于持久化的本地存储,除非主动删除数据,否则数据是永远不会过期的。localStorage 和 sessionStorage 通过 window 对象访问。1) 检测你的浏览器是否支持 localStorage: if(window.localStorage){ alert ( 'YES!' ); } else alert('NO ! '); 2) 数据都是以键值对的形式存储在 localStorage 中的,使用时直接在 window.localStorage 中添加一个属性就可以了,定义和修改的示例如下: // 在 window.localStorage 添加一个 test 属性,并赋值 test1 的三种实现方式 localStorage.test = “test1”; localStorage[“test”] = “test1” ; localStorage.setItem(“test”,”test1”); // 属性值得修改同其的定义方式一样 // 属性值的获取 var test = localStorage.test; var test = localStorage[“test”]; var test = localStorage.getItem(“test”); // 属性的删除 localStorage.removeItem(“test”);// 清除属性 test localStorage.clear();// 清除所有的属性 3) localStorage 提供的 key() 和 length 可以方便的实现所有属性的数据遍历,例: var storage = window.localStorage; var key = “”; for(var i = 0;I < storage.length;i++){ key = storage.key(i); console.log(key + “ : ” + localStorage.getItem(key)); } 4 ) localStorage 仅能存储这种 key/value 键值对形式的数据,如果我们要存储的数据量比较大那,可以试试把这些数据转化为 json 数据,作为 value 值存储进去。如: //set the infomation var json = {“name”:”echo”,”message”:”hello localStorage”,”id”:1}; localStorage.setItem(“info”,json); //get the information var info = localStorage.getItem(“info”); info = eval(“(” + info + ”)”); console.log(“name:”+info.name+” message:”+info.message); 5 )如果你用 html5 的 canvas 做开发,你可以把这个 canvas 的内容生成一个快照在另一个 html 中显示,如: // 普通 canvas 实现 var canvas = document.getElementById(“canvas”); var url = canvas.toDataURL(“image/png”); localStorage.setItem(“image”,url); // 如果你用 webgl 做 3D 开发,可这么实现 var url = renderer.domElement.toDataURL('image/png','name'); localStorage.setItem("image",url); 二、web sql 此 API 基于 W3C WEB SQL Database Specification 和 W3C Web Storage API Specification。有些设备已经提供了对该规范的实现,对于这些设备采用内置实现而非使用 PhoneGap 的实现。对于没有存储支持的设 备,PhoneGap 的实现应该是完全兼容 W3C 规范。window.openDatabase(name, version, display_name, size) 该方法将创建一个新的 SQL Lite 数据库,并返回该 Database 对象。可使用该 Database 对象操作数据。name :数据库的名称。version :数据库的版本号。display_name :数据库的显示名。size :以字节为单位的数据库大小。localForage

Store.js: 跨浏览器通用存储接口

Last modified 2yr ago