突袭HTML5之Javascript API扩展3—本地存储全新体验

发布时间：2020-11-24 00:54:55 所属栏目：MySql教程来源：互联网

导读：存储数据在客户端可以解决很多的问题和减少不必要的传输数据: 能保存程序的状态/ 能缓存数据/能保存用户的喜好等等以前的做法是很繁笨的，接下来将详细介绍感兴

try {
localStorage.setItem(itemId, values.join(';'));
} catch (e) {
if (e == QUOTA_EXCEEDED_ERR) {
alert('Quota exceeded!');
}
}

Web Storage的方法非常简单，下面的示例是统计button点击的次数的：

复制代码

代码如下:

<!DOCTYPE html>
<html>
<head>
<script>
function clickCounter()
{
if(typeof(Storage)!=="undefined")
{
if (localStorage.clickcount)
{
localStorage.clickcount=Number(localStorage.clickcount)+1;
}
else
{
localStorage.clickcount=1;
}
document.getElementById("result").innerHTML="You have clicked the button " + localStorage.clickcount + " time(s).";
}
else
{
document.getElementById("result").innerHTML="Sorry, your browser does not support web storage...";
}
}
</script>
</head>
<body>
<p><button type="button">Click me!</button></p>
<div></div>
<p>Click the button to see the counter increase.</p>
<p>Close the browser tab (or window), and try again, and the counter will continue to count (is not reset).</p>
</body>
</html>

在上面的例子中，你可以把localStorage换成sessionStorage，点击几次button然后验证在关闭浏览器前后的效果。
存在的问题
Web Storage的缺陷主要集中在其安全性方面，具体体现在以下两点：
1. 浏览器会为每个域分配独立的存储空间，即脚本在域A中是无法访问到域B中的存储空间的，但是浏览器却不会检查脚本所在的域与当前域是否相同。即在域B中嵌入域A中的脚本依然可以访问域B中的数据。
2. 存储在本地的数据未加密而且永远不会过期，极易造成隐私泄漏。
此外，更多的安全相关的问题请参看后面实用参考中的链接。
其他规范一览(仅供了解，说不定什么时候就没了)
Web Database
在老的HTML5提议中，假如你需要存储复杂的数据则可以使用Web Database，可以像客户端程序一样使用SQL（Web Database标准已被废弃，这里就是简单提一下）；
globalStorage
这个也是html5中提出来，在浏览器关闭以后，使用globalStorage存储的信息仍能够保留下来，localStorage一样，域中任何一个页面存储的信息都能被所有的页面共享，不过目前只有FireFox支持。
基本语法:
• 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”。
IndexedDB
最后我们要介绍的就是IndexedDB了，相比其他两个规范，目前只有Firefox实现了IndexedDB（顺便提一下，Mozilla表示它们永远不会去实现Web SQL Database），不过Google已经表示正在考虑在Chrome中加入IndexDB支持。
IndexedDB引入了一个object store的概念，这有点像是一个SQL Database，你可以在“数据库”中存储“记录”，并且每条“记录”可以拥有很多“字段"，每个字段都有一个特定的数据类型，你可以选择记录的子集，并使用“光标”进行遍历，同时object store中的所有变更都是基于“事务”的。
更多的信息参看后面使用参考中讲述FireFox中IndexedDB的文档。
实用参考：
官方文档：
脚本之家：https://www.jb51.net/w3school/html5/
本地存储的安全性：
FireFox的实验特性IndexedDB:https://developer.mozilla.org/en-US/docs/IndexedDB

（编辑：焦作站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!

2/2

首页