HTML5本地存储详解
HTML5 storage提供了一种方式让网站能够把信息存储到你本地的计算机上,并再以后需要的时候进行获取。这个概念和cookie相似,区别是它是为了更大容量存储设计的。
HTML5storage提供了一种方式让网站能够把信息存储到你本地的计算机上,并再以后需要的时候进行获取。这个概念和cookie相似,区别是它是为了更大容量存储设计的。Cookie的大小是受限的,并且每次你请求一个新的页面的时候cookie都会被发送过去。HTML5的storage是存储在你的计算机上,网站在页面加载完毕后可以通过Javascript来获取这些数据。
1、sessionStorage
检测
!!window.sessionStorage;
常用方法
.key = value
.setItem(key,value)
.getItem(key)
.removeItem(key)
.clear()
1. window.sessionStorage.name = 'rainman'; // 赋值
2. window.sessionStorage.setItem('name','cnblogs'); // 赋值
3. window.sessionStorage.getItem('name'); // 取值
4. window.sessionStorage.removeItem('name'); // 移除值
5. window.sessionStorage.clear(); // 删除所有sessionStorage
事件:
window.onstorage
检测值得变化,浏览器支持不好。
说明:
- cookie的存储限制在了4k之内,相比来说,session storage有了更大的存储空间,但至于具体多大,这要参照浏览器厂商的具体实现。
- cookie有一个机制,就是在每次客户端请求服务器的时候都会将cookie发送给服务器,这无疑会做很多不必要的操作,因为并不是每次请求服务器都需要cookie的所有信息,而session storage很好的解决了这个问题,它不是采取自动发送的方式,这样就减少了不必要的工作。
- 通过sessionStorage所存储数据的生命周期,和Session类似,关闭浏览器(或标签页)后数据就不存在了。但刷新页面或使用“前进”、“后退按钮”后sessionStorage仍然存在。
- session storage每个窗口的值都是独立的(每个窗口都有自己的数据),它的数据会随着窗口的关闭而消失,窗口间的sessionStorage也是不可以共享的。
- setItem中的key、value使用的是字符串的形式进行存储的。也就是说如果有如下的代码:setItem(‘count’, 1);通过getItem(‘count’) + 5 得到的将不是预期的6(整数),而是’16’(字符串)。
- 再次使用setItem设置已经存在的key的value时,新的值将替代旧的值。
- 当存储中的数据发生改变时,会触发相应的事件(window.onstorage),但目前各浏览器对此事件的支持并不完善,暂时可以忽略。
2、localStorage
检测
!!window.localStorage;
方法和sessionStorage相同
说明:
- local storage把只把数据存储在了客户端使用,不会发送的服务器上(除非你故意这样做)。
- 而且对于某一个域下来说,local storage是共享的(多个窗口共享一个“数据库”)。
- localStorage用于持久化的本地存储,除非主动删除数据,否则数据是永远不会过期的。
举例
1. //结合JSON.stringify使用更强大
2. var person = {'name': 'rainman', 'age': 24};
3. localStorage.setItem("me", JSON.stringify(person));
4. JSON.parse(localStorage.getItem('me')).name; // 'rainman'
5.
6. /**
7. * JSON.stringify,将JSON数据转化为字符串
8. * JSON.stringify({'name': 'fred', 'age': 24}); // '{"name":"fred","age":24}'
9. * JSON.stringify(['a', 'b', 'c']); // '["a","b","c"]'
10. * JSON.parse,反解JSON.stringify
11. * JSON.parse('["a","b","c"]') // ["a","b","c"]
12. */
3、Database Storage
对简单的数据存储,使用sessionStorage和localStorage能够很好地完成,但是在对琐碎的关系数据进行处理之外,它就力所不及了。而这正是 HTML 5 的“Web SQL Database”API 接口的应用所在。
A、打开链接
1. var db = openDatabase("ToDo", "0.1", "A lalert of to do items.", 200000); // 打开链接
2. if(!db) { alert("Failed to connect to database."); } // 检测连接是否创建成功
以上代码创建了一个数据库对象 db,名称是 Todo,版本编号为0.1。db 还带有描述信息和大概的大小值。如果需要,这个大小是可以改变的,所以没有必要预先假设允许用户使用多少空间。
绝不可以假设该连接已经成功建立,即使过去对于某个用户它是成功的。为什么一个连接会失败,存在多个原因。也许用户代理出于安全原因拒绝你的访问,也许设备存储有限。面对活跃而快速进化的潜在用户代理,对用户的机器、软件及其能力作出假设是非常不明智的行为。比如,当用户使用手持设备时,他们可自由处置的数据可能只有几兆字节。
B、执行查询
1. db.transaction( function(tx) {
2. tx.executeSql(
3. "INSERT INTO ToDo (label, timestamp) values(?, ?)",
4. ['lebel', new Date().getTime()],
5. function(tx2, result){ alert('成功'); },
6. function(tx2, error){ alert('失败:' + error.message); }
7. );
8. });
- 执行SQL语句使用database.transaction()函数,该函数只有一个参数,负责执行查询的函数。
- 该函数具有一个类型事务的参数(tx)。
- 该事务参数(tx)具有一个函数:executeSql()。这个函数使用四个参数:
表示查询的SQL字符串;插入到查询中问号所在处的字符串数据;一个成功时执行的函数;一个失败时执行的函数。 - 执行成功的函数有两个参数:tx2,事务性参数;result,执行的返回结果,结构如图
- 执行成功的函数也有两个参数:tx2,事务性参数;error,错误对象,结构如图
C、其它
- Chrome支持; firefox(测试时版本4.01)不支持;IE8不支持。
D、示例
1. //创建数据库
2. var db = openDatabase("users", "1.0", "用户表", 1024 * 1024);
3. if(!db){
4. alert("Failed to connect to database.");
5. } else {
6. alert("connect to database 'K'.");
7. }
8.
9. // 创建表
10. db.transaction( function(tx) {
11. tx.executeSql(
12. "CREATE TABLE IF NOT EXISTS users (id REAL UNIQUE, name TEXT)",
13. [],
14. function(){ alert('创建users表成功'); },
15. function(tx, error){ alert('创建users表失败:' + error.message); }
16. );
17. });
18.
19. // 插入数据
20. db.transaction(function(tx) {
21. tx.executeSql(
22. "INSERT INTO users (id, name) values(?, ?)",
23. [Math.random(), 'space'],
24. function(){ alert('插入数据成功'); },
25. function(tx, error){ alert('插入数据失败: ' + error.message);}
26. );
27. });
28.
29. // 查询
30. db.transaction( function(tx) {
31. tx.executeSql(
32. "SELECT * FROM users", [],
33. function(tx, result) {
34. var rows = result.rows, length = rows.length, i=0;
35. for(i; i < length; i++) {
36. alert(
37. 'id=' + rows.item(i)['id'] +
38. 'name='+ rows.item(i)['name']
39. );
40. }
41. },
42. function(tx, error){
43. alert('Select Failed: ' + error.message);
44. }
45. );
46. });
47.
48. // 删除表
49. db.transaction(function (tx) {
50. tx.executeSql('DROP TABLE users');
51. });
4、globalStorage
这个也是html5中提出来,在浏览器关闭以后,使用globalStorage存储的信息仍能够保留下来,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;
其它
- 过期时间同 localStorage,其它的一些特性也和localStorage相似。
- 现在Firefox只支持当前域下的globalStorage存储, 如果使用公用域会导致一个这样一个类似的错误“Security error” code: “1000”。
5、兼容性
方法 |
Chrome |
Firefox (Gecko) |
Internet Explorer |
Opera |
Safari (WebKit) |
localStorage |
4 |
2 |
8 |
10.50 |
4 |
sessionStorage |
5 |
2 |
8 |
10.50 |
4 |
globalStorage |
-- |
2 |
-- |
-- |
-- |
转载于:https://www.cnblogs.com/fyq891014/archive/2012/06/02/3294757.html
HTML5本地存储详解相关推荐
- HTML5的本地存储详解
为什么80%的码农都做不了架构师?>>> Html5 学习系列(六)Html5本地存储和本地数据库 一个网站如何能在客户的浏览器存储更多的数据呢? 在Html4的时代在浏览器端 ...
- JavaScript本地存储详解
目录 1.作用 2.特点 3.localStorage使用 4.sessionStorage使用 5. localStorage和sessionStorage的区别 6.本地存储使用过程中的注意事项 ...
- HTML5 本地存储
HTML5 本地存储 1.sessionStorage 2.localStorage 3.Database Storage 4.globalStorage 5.兼容性 参考文献 本地持久化存储一直是本 ...
- HTML5本地存储使用详解
HTML5本地存储使用详解 前言 随着Web应用的发展,需要在用户本地浏览器上存储更多的应用数据,传统的cookie存储的方案已经不能满足发展的需求,而使用服务器端存储的方案则是一种无奈的选择.HTM ...
- web存储详解(cookie、sessionStorage、localStorage、indexedDB)
目录 一.web存储概念简介 1. 什么是web存储? 2. 为什么需要web存储? 二.web存储详解 1. cookie 2. sessionStorage和localStorage (1). 相 ...
- linux c 设置utc时间,C/C++标准库之转换UTC时间到local本地时间详解
前言 UTC 时间DateTime.UtcNow 和 系统本地时间 DateTime.Now 相差8个时区 ,美国本地时间和北京时间相差15个时区: 美国,而一般使用UTC时间方便统一各地区时间差异. ...
- 云原生存储详解:容器存储与 K8s 存储卷
作者 | 阚俊宝 阿里云技术专家 导读:云原生存储详解系列文章将从云原生存储服务的概念.特点.需求.原理.使用及案例等方面,和大家一起探讨云原生存储技术新的机遇与挑战.本文为该系列文章的第二篇,会对容 ...
- k8s挂载目录_云原生存储详解:容器存储与 K8s 存储卷
作者 | 阚俊宝 阿里云技术专家 导读:云原生存储详解系列文章将从云原生存储服务的概念.特点.需求.原理.使用及案例等方面,和大家一起探讨云原生存储技术新的机遇与挑战.本文为该系列文章的第二篇,会对容 ...
- docker修改镜像的存储位置_云原生存储详解:容器存储与 K8s 存储卷(内含赠书福利)...
作者 | 阚俊宝 阿里巴巴技术专家 参与文末留言互动,即有机会获得赠书福利! 导读:云原生存储详解系列文章将从云原生存储服务的概念.特点.需求.原理.使用及案例等方面,和大家一起探讨云原生存储技术新 ...
最新文章
- 如何查看 oracle 官方文档
- 问得最多的十个JavaScript前端面试问题
- 操作系统习题3—进程的互斥与同步
- python 计量_距离度量以及python实现(二)
- Java黑皮书课后题第3章:**3.4(随机月份)编写一个随机产生1和12之间整数的程序,并根据数组1,2,3...显示对应的月份
- Debian下Cannot set LC_CTYPE to default locale: No such file or directory解决方法
- MySQL Infobright 数据仓库快速安装笔记[转]
- 集体备课模板_幼儿教师资格证面试试讲万能模板和历年真题,看完轻松过面试!...
- 模拟飞行 android,RFS模拟飞行pro安卓版
- 多软件启动器 v1.0
- RandomAccess接口
- JavaScript简易文字对战游戏
- zemax验证高斯公式_Zemax中高斯光束设置的相关问题
- IDEA——问题汇总
- B 站崩了,总结下「高可用」和「异地多活」
- 代码主题darcula_设置 IntelliJ IDEA 的彩色代码主题
- libc、glibc和glib的关系
- 使用IDEA快速画类图
- freemarker之页面静态化
- 穷举法求经典数学问题(鸡和兔)
热门文章
- 求 一个字符 在二进制表示中1的个数
- C++提高部分_C++普通函数与函数模板的区别---C++语言工作笔记084
- 经典线程同步 信号量Semaphore
- WSAGetLastError() 返回的错误
- mysql 注释写法有哪些_mysql的注释有几种写法?
- 划分字母区间c语言,LeetCode(#763):划分字母区间
- python中scrapy加请求头_Python爬虫之scrapy框架随机请求头中间件的设置
- C语言和设计模式(状态模式)
- linux 截取列_Linux 常用命令汇总
- html里定义函数调用函数调用,函数调用的三种方式是什么?