HTML5 本地存储
HTML5 本地存储
- 1、sessionStorage
- 2、localStorage
- 3、Database Storage
- 4、globalStorage
- 5、兼容性
- 参考文献
本地持久化存储一直是本地客户端程序优于 web 程序的一个方面。对于本地应用程序,操作系统会一共一个抽象层,用于存储和获取特定于应用程序的数据,例如用户设置或者运行时状态。这些值可以被存储于注册表、INI 文件,或者其他什么地方,这取决于操作系统的实现。如果你的本地应用程序需要不简单是键值对形式的本地存储,你也可以使用嵌入式数据库、发明你自己的文件格式,或者其他很多种解决方案(引自“HTML5本地存储详解)。
HTML5 storage提供了一种方式让网站能够把信息存储到你本地的计算机上,并再以后需要的时候进行获取。这个概念和cookie相似,区别是它是为了更大容量存储设计的。Cookie的大小是受限的,并且每次你请求一个新的页面的时候cookie都会被发送过去。HTML5的storage是存储在你的计算机上,网站在页面加载完毕后可以通过Javascript来获取这些数据。
1、sessionStorage
- 检测
- !!window.sessionStorage;
- 常用方法
- .key = value
- .setItem(key, value)
- .getItem(key)
- .removeItem(key)
- .clear()
window.sessionStorage.name = 'rainman'; // 赋值 window.sessionStorage.setItem('name','cnblogs'); // 赋值 window.sessionStorage.getItem('name'); // 取值 window.sessionStorage.removeItem('name'); // 移除值 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用于持久化的本地存储,除非主动删除数据,否则数据是永远不会过期的。
举例
//结合JSON.stringify使用更强大 var person = {'name': 'rainman', 'age': 24}; localStorage.setItem("me", JSON.stringify(person)); JSON.parse(localStorage.getItem('me')).name; // 'rainman'/*** JSON.stringify,将JSON数据转化为字符串* JSON.stringify({'name': 'fred', 'age': 24}); // '{"name":"fred","age":24}'* JSON.stringify(['a', 'b', 'c']); // '["a","b","c"]'* JSON.parse,反解JSON.stringify* JSON.parse('["a","b","c"]') // ["a","b","c"]*/
3、Database Storage
对简单的数据存储,使用sessionStorage和localStorage能够很好地完成,但是在对琐碎的关系数据进行处理之外,它就力所不及了。而这正是 HTML 5 的“Web SQL Database”API 接口的应用所在。
A、打开链接
var db = openDatabase("ToDo", "0.1", "A lalert of to do items.", 200000); // 打开链接 if(!db) { alert("Failed to connect to database."); } // 检测连接是否创建成功
以上代码创建了一个数据库对象 db,名称是 Todo,版本编号为0.1。db 还带有描述信息和大概的大小值。如果需要,这个大小是可以改变的,所以没有必要预先假设允许用户使用多少空间。
绝不可以假设该连接已经成功建立,即使过去对于某个用户它是成功的。为什么一个连接会失败,存在多个原因。也许用户代理出于安全原因拒绝你的访问,也许设备存储有限。面对活跃而快速进化的潜在用户代理,对用户的机器、软件及其能力作出假设是非常不明智的行为。比如,当用户使用手持设备时,他们可自由处置的数据可能只有几兆字节。
B、执行查询
db.transaction( function(tx) { tx.executeSql("INSERT INTO ToDo (label, timestamp) values(?, ?)", ['lebel', new Date().getTime()], function(tx2, result){ alert('成功'); }, function(tx2, error){ alert('失败:' + error.message); }); });
- 执行SQL语句使用database.transaction()函数,该函数只有一个参数,负责执行查询的函数。
- 该函数具有一个类型事务的参数(tx)。
- 该事务参数(tx)具有一个函数:executeSql()。这个函数使用四个参数: 表示查询的SQL字符串;插入到查询中问号所在处的字符串数据;一个成功时执行的函数;一个失败时执行的函数。
- 执行成功的函数有两个参数:tx2,事务性参数;result,执行的返回结果,结构如图
- 执行成功的函数也有两个参数:tx2,事务性参数;error,错误对象,结构如图
C、其它
- Chrome支持; firefox(测试时版本4.01)不支持;IE8不支持。
D、示例
//创建数据库 var db = openDatabase("users", "1.0", "用户表", 1024 * 1024); if(!db){alert("Failed to connect to database."); } else {alert("connect to database 'K'."); }// 创建表 db.transaction( function(tx) { tx.executeSql("CREATE TABLE IF NOT EXISTS users (id REAL UNIQUE, name TEXT)", [], function(){ alert('创建users表成功'); }, function(tx, error){ alert('创建users表失败:' + error.message); }); }); // 插入数据 db.transaction(function(tx) { tx.executeSql("INSERT INTO users (id, name) values(?, ?)", [Math.random(), 'space'], function(){ alert('插入数据成功'); }, function(tx, error){ alert('插入数据失败: ' + error.message);}); }); // 查询 db.transaction( function(tx) { tx.executeSql("SELECT * FROM users", [], function(tx, result) {var rows = result.rows, length = rows.length, i=0;for(i; i < length; i++) { alert('id=' + rows.item(i)['id'] + 'name='+ rows.item(i)['name']); } }, function(tx, error){alert('Select Failed: ' + error.message);}); }); // 删除表 db.transaction(function (tx) { tx.executeSql('DROP TABLE users'); });
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/wangli-66/p/5672724.html
HTML5 本地存储相关推荐
- HTML5本地存储——Web SQL Database
在HTML5 WebStorage介绍了html5本地存储的Local Storage和Session Storage,这两个是以键值对存储的解决方案,存储少量数据结构很有用,但是对于大量结构化数据就 ...
- HTML5本地存储之Web Storage篇
2019独角兽企业重金招聘Python工程师标准>>> Web Storage是HTML5引入的一个非常重要的功能,在前端开发中经常用到,可以在客户端本地存储数据,类似HTML4的c ...
- HTML5本地存储不完全指南
历史 在HTML5本地存储之前,如果我们想在客户端保存持久化数据,有这么几个选择: HTTP cookie.HTTP cookie的缺点很明显,最多只能存储4KB的数据,每个HTTP请求都会被传送回服 ...
- html5储存类型,html5本地存储-留言板
HTML5每日一练之JS API-本地存储LocalStorage 留言板 | 前端开发网(W3Cfuns.com)! var Storage = { saveData:function()//保存数 ...
- HTML5本地存储——IndexedDB(二:索引)
在HTML5本地存储--IndexedDB(一:基本使用)中介绍了关于IndexedDB的基本使用方法,很不过瘾,这篇我们来看看indexedDB的杀器--索引. 熟悉数据库的同学都知道索引的一个好处 ...
- HTML5本地存储——IndexedDB
在HTML5本地存储--Web SQL Database提到过Web SQL Database实际上已经被废弃,而HTML5的支持的本地存储实际上变成了 Web Storage(Local Stora ...
- HTML5 本地存储和内容按需加载的思路和方法
HTML5 本地存储和内容按需加载的思路和方法 作者:佚名 字体:[增加 减小] 来源:互联网 时间:04-07 16:05:09 我要评论 本文将着重介绍HTML5本地存储和内容按需加载的思路和方法 ...
- HTML5本地存储使用详解
HTML5本地存储使用详解 前言 随着Web应用的发展,需要在用户本地浏览器上存储更多的应用数据,传统的cookie存储的方案已经不能满足发展的需求,而使用服务器端存储的方案则是一种无奈的选择.HTM ...
- HTML5 本地存储 localstorage 安全分析
在HTML5本地存储出现以前,WEB数据存储的方法已经有很多,比如HTTP Cookie,IE userData,Flash Cookie,Google Gears.其实再说细点,浏览WEB的历史记录 ...
最新文章
- 2022-2028年中国互联网+不良资产处置行业深度调研及投资前景预测报告
- 欧式聚类分割并可视化
- LL(1)预测分析表的构造
- springboot 集成jwt设置过期时间_传说中的jwt,我们来征服一下
- JSON学习笔记-3
- vux 组件打造手机端项目
- 使用Docker部署Node.js中的Vue项目
- 【机器学习应用】还没期末考试,算法却说我的物理一定挂科
- 我的第一个python web开发框架(2)——一个简单的小外包
- spring boot 中启用 https
- java猜数字小游戏_Java实现简单猜数字小游戏
- android 读写文件 简书,Android10 文件操作适配
- 日志打印工具类LogUtils
- setuna截图怎么放大缩小_实用的高清截图系列小窍门详解,一章带你“真正学会”截图!...
- 线性规划图解法求最优解_线性规划的图解法6.ppt
- Endnote X6大客户版破解版+新功能介绍+视频介绍
- 全域营销引领设计师职能进化
- 图像处理领域术语英文对应
- Exception: Gradle install not valid ___APK打包报错
- Linux系统用户详细介绍
热门文章
- 计算机数值方法期末考试,《计算机数值方法》测试题二
- 教育部双一流计算机名单,清华大学双一流学科名单34个【教育部公布】
- 计算机光盘工作原理,CD-ROM的工作原理
- a标签右侧尖括号_没想到贴线缆标签有很多讲究和技巧?一般人真不知道
- mysql 5.5半同步复制_MySQL5.5配置安装半同步复制
- 给 K8s API “做减法”:阿里巴巴云原生应用管理的挑战和实践
- python ipaddr_python之IP地址或IP段处理模块-ipaddr
- Java控制台如何输入一行、多行?
- java 第9章_Java基础第9章.ppt
- mysql php gpl_MySQL_MySQL数据库远程访问权限如何打开(两种方法),下载GPL版本安装MySQL Community - phpStudy...