HTML5本地存储
2014-03-13 10:09
417 查看
Local Storage 属于 Web Storage 标准,是HTML5的一部分,又称为DOM Storage. 那么究竟什么是HTML5本地存储 ? 简单来说,它就是一种让网页可以把键值对存储在用户浏览器客户端的方法。像Cookie一样,这些数据不会因为你打开新网站,刷新页面,乃至关闭你的浏览器而消失。
域+path+name 标识 name+value, 由服务器产生,发回client,保存在client (http 的set-cookies 字段) 每次http请求都会发送 Cookies中 “域+path”相同的所有cookie 大多数浏览器Cookie最大问为4K 浏览器可能还限制了用户计算机存储的cookie数量(如允许每个站点最多存储20个cookies,超过则删除旧的;有些浏览器还对所有站点的cookie总数作出限制,如300)
域相关 永久保存在本地(client) 容量无限制 数据不会过期,除非由于security 原因活着用户请求删除
跟Local Storage类似,但Session Storage 只与当前会话相关,浏览器关闭则删除。 其特别之处有: top browser context,及在同一个页面内的所有frame/iframe 共享同一个session storage; 不同的page 有不同的session storage 会话结束即删除
相对于Local Storage (DOM Storage)来说,IndexedDB 用于客户端的大量的结构化数据存储,Local Storage 属于小数据量存储。 特性包括:
一个域一个database key-value 方式 建立在关系数据模型之上,索引表、游标、事务等概念 满足一些offline web applications 需求
这里要强调的是 IndexedDB属于大数据量存储,而Local Storage属于小数据量存储。其在WebKit中的实现表现为: Local Storage 初始化时全部数据被读入内存,其后的操作都针对内存操作,但存在后台同步线程将数据写入sqlite3数据库;因此Local Storage API是同步操作。但对IndexedDB而言,数据量大,显然不能全部读入内存,采用标注的数据库读写方式,在window中使用的是异步操作方式;只有在worker环境下是同步。
相关类UML图如下:
代码路径为: Source/WebCore/storage. 其实现本质为在少量数据情况下,首先将所有数据同步到内存中,后台线程负责将用户操作的数据同步写入数据库。 抽象图如下:
StorageArea/StorageAreaImpl: 跟User打交道,保存每个User的所有数据
StorageAreaSync: 同步类,保存改变列表,实现所有的同步逻辑,可能被多个线程访问,因此包含锁机制代码; 同时,包括定时器,效率考虑,可多个数据同时同步;
StorageSyncManager : 同步管理类, 包含后台线程类,接收同步类的同步请求,并创建task交给后台线程的队列中。 Manager类本身功能不多,大多调用其它类的接口。例如调用LocalStorageTask接口创建Task,调用LocalStorageThread 接口将Task放入LocalStorageThread的消息队列里。
LocalStorageThread 后台线程,包含task对列, 提供task对列的入队出队函数
LocalStorageTask task类,一般接收StorageAreaSync对象,调用同步对象的同步代码、同步完成通知代码。
假设在starwd.com网页里嵌入2个百度,2个google的iframe,同时如果每个iframe都访问了Local Storage和Session Storage的情况;且用户浏览器打开了2个starwd.com 的Page,其Local Storage和Session Storage的情况如下。
接口如下:
localStorage.getItem(key):获取指定key本地存储的值
localStorage.setItem(key,value):将value存储到key字段
localStorage.removeItem(key):删除指定key本地存储的值
示例有效果为:
主要代码见:
用于读写文件等操作,包括对于文件流数据的读写等。
全部例子见: http://www.starwd.com/wp-content/uploads/2011/12/local-storage.zip
原文地址: http://www.starwd.com/?p=448
LocalStorage、SessionStorage、IndexedDB、cookies FileSystem
cookies
域+path+name 标识 name+value, 由服务器产生,发回client,保存在client (http 的set-cookies 字段) 每次http请求都会发送 Cookies中 “域+path”相同的所有cookie 大多数浏览器Cookie最大问为4K 浏览器可能还限制了用户计算机存储的cookie数量(如允许每个站点最多存储20个cookies,超过则删除旧的;有些浏览器还对所有站点的cookie总数作出限制,如300)
Local Storage
域相关 永久保存在本地(client) 容量无限制 数据不会过期,除非由于security 原因活着用户请求删除
Session Storage
跟Local Storage类似,但Session Storage 只与当前会话相关,浏览器关闭则删除。 其特别之处有: top browser context,及在同一个页面内的所有frame/iframe 共享同一个session storage; 不同的page 有不同的session storage 会话结束即删除
IndexedDB
相对于Local Storage (DOM Storage)来说,IndexedDB 用于客户端的大量的结构化数据存储,Local Storage 属于小数据量存储。 特性包括: 一个域一个database key-value 方式 建立在关系数据模型之上,索引表、游标、事务等概念 满足一些offline web applications 需求
这里要强调的是 IndexedDB属于大数据量存储,而Local Storage属于小数据量存储。其在WebKit中的实现表现为: Local Storage 初始化时全部数据被读入内存,其后的操作都针对内存操作,但存在后台同步线程将数据写入sqlite3数据库;因此Local Storage API是同步操作。但对IndexedDB而言,数据量大,显然不能全部读入内存,采用标注的数据库读写方式,在window中使用的是异步操作方式;只有在worker环境下是同步。
Webkit 中Local Storage的实现
相关类UML图如下: 代码路径为: Source/WebCore/storage. 其实现本质为在少量数据情况下,首先将所有数据同步到内存中,后台线程负责将用户操作的数据同步写入数据库。 抽象图如下:
StorageArea/StorageAreaImpl: 跟User打交道,保存每个User的所有数据
StorageAreaSync: 同步类,保存改变列表,实现所有的同步逻辑,可能被多个线程访问,因此包含锁机制代码; 同时,包括定时器,效率考虑,可多个数据同时同步;
StorageSyncManager : 同步管理类, 包含后台线程类,接收同步类的同步请求,并创建task交给后台线程的队列中。 Manager类本身功能不多,大多调用其它类的接口。例如调用LocalStorageTask接口创建Task,调用LocalStorageThread 接口将Task放入LocalStorageThread的消息队列里。
LocalStorageThread 后台线程,包含task对列, 提供task对列的入队出队函数
LocalStorageTask task类,一般接收StorageAreaSync对象,调用同步对象的同步代码、同步完成通知代码。
Local Storage VS Session Storage
假设在starwd.com网页里嵌入2个百度,2个google的iframe,同时如果每个iframe都访问了Local Storage和Session Storage的情况;且用户浏览器打开了2个starwd.com 的Page,其Local Storage和Session Storage的情况如下。
Local Storage 使用示例
接口如下: localStorage.getItem(key):获取指定key本地存储的值
localStorage.setItem(key,value):将value存储到key字段
localStorage.removeItem(key):删除指定key本地存储的值
示例有效果为:
主要代码见:
var contacts_list = [], i, key; for (i = 0; i < window.localStorage.length; i++) { //获取LocalStorage Length key = window.localStorage.key(i); // 获取key if (/Contacts:\d+/.test(key)) contacts_list.push(JSON.parse(window.localStorage.getItem(key))); // 获取value storeAdd: function(entry) { entry.id = Contacts.index; window.localStorage.setItem("Contacts:index", ++Contacts.index); // 设置Item window.localStorage.setItem("Contacts:"+ entry.id, JSON.stringify(entry)); },
FileSystem
用于读写文件等操作,包括对于文件流数据的读写等。全部例子见: http://www.starwd.com/wp-content/uploads/2011/12/local-storage.zip
原文地址: http://www.starwd.com/?p=448
相关文章推荐
- Html5本地存储
- HTML5本地存储应用sessionStorage和localStorage
- HTML5开发学习(3):本地存储之Web Sql Database(附源码)
- [HTML] 使用HTML5的本地存储localStorage
- HTML5-localStorage 本地存储
- 【麦子学院】03.web前端开发之html5本地存储、网页留言板、video、audio、HTML5拖放
- HTML5 本地存储
- HTML5 本地存储 LocalStorage
- html5本地存储
- 解析HTML5中的新功能本地存储localStorage
- Sencha Touch 2 结合HTML5的本地存储创建数据库实现增、删、改、查
- html5本地存储
- 分享6个实用的HTML5本地存储(Local Storage)教程
- Html5本地存储之Web SQL&nbsp…
- 本地存储(html5的localStorage和ie的userData)微博回填功能
- Js 操作浏览器本地存储对象:HTML5 localstorage
- HTML5 LocalStorage 本地存储
- HTML5 LocalStorage 本地存储
- html5本地存储 localStorage操作使用详解
- HTML5 本地存储的用法