Javascript本地存储数据方案
来源:互联网 发布:java web视频 知乎 编辑:程序博客网 时间:2024/04/28 04:22
Cookie
这个恐怕是最常见也是用得最多的技术了,也是比较古老的技术了。COOKIE优点很多,使用起来很方便
但它的缺点也很多:
比如跨域访问问题;无法保存太大的数据(最大仅为4KB);本地保存的数据会发送给服务器,浪费带宽 等等;
大家都比较熟悉,这里不再过多介绍。
下面主要说一下HTML5提供的几种本地存储方案。
localStorage
这是一种持久化的存储方式,也就是说如果不手动清除,数据就永远不会过期。
它也是采用Key - Value的方式存储数据,底层数据接口是sqlite,按域名将数据分别保存到对应数据库文件里。
它能保存更大的数据(IE8上是10MB,Chrome是5MB),同时保存的数据不会再发送给服务器,避免带宽浪费。
更多的详细介绍可以参考这里
使用方法:
localStorage.length 获得storage中的个数
localStorage.key(n) 获得storage中第n个元素对的键值(第一个元素是0)
localStorage.getItem(key)获取键值key对应的值
localStorage.key 获取键值key对应的值
localStorage.setItem(key, value) 添加数据,键值为key,值为value
localStorage.removeItem(key) 移除键值为key的数据
localStorage.clear() 清除所有数据
另外推荐一个第三方基于localStorage的存储方案 jStorage,它对localStorage进行了封装,并且实现了可以手动设置数据的过期时间
此外它还提供了两个方法 Publish/Subscribe,通过使用这两个方法可以实现同一浏览器多窗口之间数据同步。
详细的说明可以访问它的官方网站:jStorage
sessionStorage
和服务器端使用的SESSION类似,是一种会话级别的缓存,关闭浏览器会数据会被清除。
不过有点特别的是它的作用域是窗口级别的,也就是说不同窗口间的sessionStorage数据不能共享的。
使用方法(和localStorage完全相同):
sessionStorage.length获得storage中的个数
sessionStorage.key(n)获得storage中第n个元素对的键值(第一个元素是0)
sessionStorage.getItem(key)获取键值key对应的值
sessionStorage.key 获取键值key对应的值
sessionStorage.setItem(key, value)添加数据,键值为key,值为value
sessionStorage.removeItem(key)移除键值为key的数据
sessionStorage.clear()清除所有数据
globalStorage
这个是Firefox浏览器特有的,也是一种持久化的存储,和localStorage只能在同一域名下共享存储不同,你可以通过设置域名来指定共享的范围,比如作用在本级域名及所有子域名;或者作用于主域名下所有子域名;甚至还可以作用任何域名下。
看样子这个使用起来很灵活,不过坏消息是从Firefox13开始就不再支持这个方法了,推荐使用localStorage了。
基本用法:
globalStorage['developer.mozilla.org'] —— 在developer.mozilla.org下面所有的子域都可以通过这个存储对象来进行读和写。
globalStorage['mozilla.org'] —— 在mozilla.org域名下面的所有网页都可以通过这个存储对象来进行读和写。
globalStorage['org'] —— 在.org域名下面的所有网页都可以通过这个存储对象来进行读和写。
globalStorage[''] —— 在任何域名下的任何网页都可以通过这个存储对象来进行读和写。
方法属性:
setItem(key, value) —— 设置或重置 key 值。
getItem(key) —— 获取 key 值。
removeItem(key) —— 删除 key 值。
设置 key 值:window.globalStorage["planabc.net"].key = value;
获取 key 值:value = window.globalStorage["planabc.net"].key;
indexedDB
IndexedDB是HTML5-WebStorage的重要一环,是一种轻量级NOSQL数据库。
IndexedDB API 取代了 Web Storage API,后者在 HTML5 规范中已不推荐使用。
与 Web Storage 相比,IndexedDB 具有多个优势,其中包括索引、事务处理和健壮的查询功能。
IndexedDB的技术特点是,不需要你去写特定的sql语句来对数据进行操作,它是nosql的,数据形式使用的是json。
目前最新的主流浏览器已经都支持此标准(IE从10开始支持)
更多资料参考下面这些网站:
W3官方标准说明、微软MSDN文档 、Mozilla官方文档、IBM介绍文档
Web Sql Database
这是一个已经废弃的方案了,目前除了IE和Firefox,其他主流浏览器都支持(Chrome/Safari/Opera)
这是一个让你可以在Web上直接使用的SQL数据库,你要做的就是打开数据库,然后执行SQL,和你对Mysql做的事情没什么两样。
但是它最大的问题就是标准不统一:它的后端都是sqlite,但是你可能要针对不同浏览器写不同的SQL语句。
更多详细说明可以看 这里 和 W3官方标准
userData
这个是IE浏览器特有的,很早就有了,不是HTML5标准,目前也只有IE浏览器才支持。
对微软的东西没太大兴趣,想了解的可以看这里
原创地址:http://blog.csdn.net/rainday0310/article/details/20635343
- Javascript本地存储数据方案
- Javascript本地存储数据方案
- C#数据本地存储方案之SQLite
- C#数据本地存储方案之SQLite
- C#数据本地存储方案之SQLite
- C# SQLite数据本地存储方案
- C#数据本地存储方案之SQLite
- C#中数据本地存储方案之SQLite
- SensorTag-iOS监测数据本地txt存储方案修改
- Android本地存储方案 SharedPreferences
- 移动端本地存储方案
- App离线本地存储方案
- JavaScript实现本地存储
- Javascript本地存储小结
- Javascript本地存储小结
- JavaScript中级 ---- 本地存储
- iOS数据存储方案
- 数据的存储方案
- Map 遍历的四种方法和性能测试
- 程序员浪费生命的几种方式
- 我很坚强 直到最后看到自己的眼泪
- Android自定义控件StaggeredGridView-瀑布流效果的GridView
- 祝你幸福
- Javascript本地存储数据方案
- 内存对齐的规则及其作用
- 从 bufferevent 实现学习 Libevent 的使用
- Prime Gap
- 图像缩放算法
- 对前途迷茫时多看看
- How to connect to MySQL database from Visual Studio VS2010 – problems with NET connectors
- spi(5)参考资料
- ffmpeg解码流程 turorial5详解