为什么要存数据到客户端？
存储数据在客户端可以解决很多的问题和减少不必要的传输数据：
1. 能保存程序的状态：用户关闭浏览器再打开后能知道他工作到哪了。
2. 能缓存数据：很多不会变化的数据根本没必要每次都从服务端获取。
3. 能保存用户的喜好：这种数据通常不需要存在服务端。
以前的做法
在HTML5本地存储之前，如果我们想在客户端保存持久化数据，有这么几个选择：
1. HTTP cookie。HTTP cookie的缺点很明显，最多只能存储4KB的数据，每个HTTP请求都会被传送回服务器，明文传输（除非你使用SSL）。
2. IE userData。userData是微软在上世纪90年代的浏览器大战时推出的本地存储方案，借助DHTML的behaviour属性来存储本地数据， 允许每个页面最多存储64K数据，每个站点最多640K数据，userData的缺点显而易见，它不是Web标准的一部分，除非你的程序只需要支持IE， 否则它基本没什么用处。
3. Flash cookie。Flash cookie实际上和HTTP cookie并不是一回事，或许它的名字应该叫做"Flash本地存储”，Flash cookie默认允许每个站点存储不超过100K的数据，如果超出了，Flash会自动向用户请求更大的存储空间，借助Flash的 ExternalInterface接口，你可以很轻松地通过Javascript操作Flash的本地存储。Flash的问题很简单，就是因为它是 Flash。
4. Google Gears。Gears是Google在07年发布的一个开源浏览器插件，旨在改进各大浏览器的兼容性，Gears内置了一个基于SQLite的嵌入式 SQL数据库，并提供了统一API对数据库进行访问，在取得用户授权之后，每个站点可以在SQL数据库中存储不限大小的数据，Gears的问题就是 Google自己都已经不用它了。
眼花缭乱的各种技术导致的就是浏览器的兼容性问题。这里大家用的最多的可能就是cookie了。
HTML5中的全新体验
针对以上的问题，HTML5中给出了更加理想的解决方案：假如你需要存储的只是简单的用key/value对即可解决的数据，则可以使用Web Storage。
与Cookie相比，Web Storage存在不少的优势，概括为以下几点：
1. 存储空间更大：IE8下每个独立的存储空间为10M，其他浏览器实现略有不同，但都比Cookie要大很多。
2. 存储内容不会发送到服务器：当设置了Cookie后，Cookie的内容会随着请求一并发送的服务器，这对于本地存储的数据是一种带宽浪费。而Web Storage中的数据则仅仅是存在本地，不会与服务器发生任何交互。
3. 更多丰富易用的接口：Web Storage提供了一套更为丰富的接口，使得数据操作更为简便。
4. 独立的存储空间：每个域（包括子域）有独立的存储空间，各个存储空间是完全独立的，因此不会造成数据混乱。
Web Storage分类
Web Storage实际上由两部分组成：sessionStorage与localStorage。
sessionStorage用于本地存储一个会话（session）中的数据，这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储，仅仅是会话级别的存储。
localStorage用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。
检查是否支持Web Storage
Web Storage在各大主流浏览器中都支持了，但是为了兼容老的浏览器，还是要检查一下是否可以使用这项技术。
第一种方式：通过检查Storage对象是否存在来检查浏览器是否支持Web Storage：
复制代码代码如下:
if(typeof(Storage)!=="undefined"){
// Yes! localStorage and sessionStorage support!
// Some code.....
} else {
// Sorry! No web storage support..
}
第二种方式就是分别检查各自的对象，例如检查localStorage是否支持：
复制代码代码如下:
if (typeof(localStorage) == 'undefined' ) {
alert('Your browser does not support HTML5 localStorage. Try upgrading.');
} else {
// Yes! localStorage and sessionStorage support!
// Some code.....
}
或者：
if('localStorage' in window && window['localStorage'] !== null){
// Yes! localStorage and sessionStorage support!
// Some code.....
} else {
alert('Your browser does not support HTML5 localStorage. Try upgrading.');
}
或者
if (!!localStorage) {
// Yes! localStorage and sessionStorage support!
// Some code.....
} else {
alert('Your browser does not support HTML5 localStorage. Try upgrading.');
}
很显然第一个方式最直接，也最简单。
Web Storage的使用
Web Storage中存储的是键值对，而且浏览器会以字符串方式存储。记住在必要的时候将他们转为其他格式。
sessionStorage与localStorage除了用途不同外，成员列表是一样的：
复制代码代码如下:
key = value: 存贮键值对
setItem(key, value): 存贮键值对
getItem(key): 取键值对
removeItem(key)：移除所有键值对
clear()：清空所有键值对
length：键值对的数目
这里还是要强调一下：setItem(key,value)方法中的value类型，理论上可以是任意类型，不过实际上浏览器会调用value的toString方法来获取其字符串值并存储到本地，因此如果是自定义的类型则需要自己定义有意义的toString方法。例如下面的例子结合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"]
*/
此外，添加键值对的时候，如果添加的数量比较多，比较保险的做法是去检查是否有超出限额的异常：
复制代码代码如下:
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 onclick="clickCounter()" type="button">Click me!</button></p>
<div id="result"></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的文档。
实用参考：
官方文档：http://www.w3schools.com/html5/
：https://www.jb51.net/w3school/html5/
本地存储的安全性：http://www.mhtml5.com/2012/03/4586.html
FireFox的实验特性IndexedDB:https://developer.mozilla.org/en-US/docs/IndexedDB
存储数据在客户端可以解决很多的问题和减少不必要的传输数据：
1. 能保存程序的状态：用户关闭浏览器再打开后能知道他工作到哪了。
2. 能缓存数据：很多不会变化的数据根本没必要每次都从服务端获取。
3. 能保存用户的喜好：这种数据通常不需要存在服务端。
以前的做法
在HTML5本地存储之前，如果我们想在客户端保存持久化数据，有这么几个选择：
1. HTTP cookie。HTTP cookie的缺点很明显，最多只能存储4KB的数据，每个HTTP请求都会被传送回服务器，明文传输（除非你使用SSL）。
2. IE userData。userData是微软在上世纪90年代的浏览器大战时推出的本地存储方案，借助DHTML的behaviour属性来存储本地数据， 允许每个页面最多存储64K数据，每个站点最多640K数据，userData的缺点显而易见，它不是Web标准的一部分，除非你的程序只需要支持IE， 否则它基本没什么用处。
3. Flash cookie。Flash cookie实际上和HTTP cookie并不是一回事，或许它的名字应该叫做"Flash本地存储”，Flash cookie默认允许每个站点存储不超过100K的数据，如果超出了，Flash会自动向用户请求更大的存储空间，借助Flash的 ExternalInterface接口，你可以很轻松地通过Javascript操作Flash的本地存储。Flash的问题很简单，就是因为它是 Flash。
4. Google Gears。Gears是Google在07年发布的一个开源浏览器插件，旨在改进各大浏览器的兼容性，Gears内置了一个基于SQLite的嵌入式 SQL数据库，并提供了统一API对数据库进行访问，在取得用户授权之后，每个站点可以在SQL数据库中存储不限大小的数据，Gears的问题就是 Google自己都已经不用它了。
眼花缭乱的各种技术导致的就是浏览器的兼容性问题。这里大家用的最多的可能就是cookie了。
HTML5中的全新体验
针对以上的问题，HTML5中给出了更加理想的解决方案：假如你需要存储的只是简单的用key/value对即可解决的数据，则可以使用Web Storage。
与Cookie相比，Web Storage存在不少的优势，概括为以下几点：
1. 存储空间更大：IE8下每个独立的存储空间为10M，其他浏览器实现略有不同，但都比Cookie要大很多。
2. 存储内容不会发送到服务器：当设置了Cookie后，Cookie的内容会随着请求一并发送的服务器，这对于本地存储的数据是一种带宽浪费。而Web Storage中的数据则仅仅是存在本地，不会与服务器发生任何交互。
3. 更多丰富易用的接口：Web Storage提供了一套更为丰富的接口，使得数据操作更为简便。
4. 独立的存储空间：每个域（包括子域）有独立的存储空间，各个存储空间是完全独立的，因此不会造成数据混乱。
Web Storage分类
Web Storage实际上由两部分组成：sessionStorage与localStorage。
sessionStorage用于本地存储一个会话（session）中的数据，这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储，仅仅是会话级别的存储。
localStorage用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。
检查是否支持Web Storage
Web Storage在各大主流浏览器中都支持了，但是为了兼容老的浏览器，还是要检查一下是否可以使用这项技术。
第一种方式：通过检查Storage对象是否存在来检查浏览器是否支持Web Storage：
复制代码代码如下:
if(typeof(Storage)!=="undefined"){
// Yes! localStorage and sessionStorage support!
// Some code.....
} else {
// Sorry! No web storage support..
}
第二种方式就是分别检查各自的对象，例如检查localStorage是否支持：
复制代码代码如下:
if (typeof(localStorage) == 'undefined' ) {
alert('Your browser does not support HTML5 localStorage. Try upgrading.');
} else {
// Yes! localStorage and sessionStorage support!
// Some code.....
}
或者：
if('localStorage' in window && window['localStorage'] !== null){
// Yes! localStorage and sessionStorage support!
// Some code.....
} else {
alert('Your browser does not support HTML5 localStorage. Try upgrading.');
}
或者
if (!!localStorage) {
// Yes! localStorage and sessionStorage support!
// Some code.....
} else {
alert('Your browser does not support HTML5 localStorage. Try upgrading.');
}
很显然第一个方式最直接，也最简单。
Web Storage的使用
Web Storage中存储的是键值对，而且浏览器会以字符串方式存储。记住在必要的时候将他们转为其他格式。
sessionStorage与localStorage除了用途不同外，成员列表是一样的：
复制代码代码如下:
key = value: 存贮键值对
setItem(key, value): 存贮键值对
getItem(key): 取键值对
removeItem(key)：移除所有键值对
clear()：清空所有键值对
length：键值对的数目
这里还是要强调一下：setItem(key,value)方法中的value类型，理论上可以是任意类型，不过实际上浏览器会调用value的toString方法来获取其字符串值并存储到本地，因此如果是自定义的类型则需要自己定义有意义的toString方法。例如下面的例子结合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"]
*/
此外，添加键值对的时候，如果添加的数量比较多，比较保险的做法是去检查是否有超出限额的异常：
复制代码代码如下:
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 onclick="clickCounter()" type="button">Click me!</button></p>
<div id="result"></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的文档。
实用参考：
官方文档：http://www.w3schools.com/html5/
：https://www.jb51.net/w3school/html5/
本地存储的安全性：http://www.mhtml5.com/2012/03/4586.html
FireFox的实验特性IndexedDB:https://developer.mozilla.org/en-US/docs/IndexedDB
标签：
本地存储,Storage
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！
如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
暂无“突袭HTML5之Javascript API扩展3—本地存储全新体验”评论...
苹果官宣WWDC 2024！预计会有大批AI功能 - 2024/11/23
3月27日消息，苹果宣布2024年全球开发者大会（WWDC）将于6月10日至6月14日举行，巧合的是，这次大会与端午假期重合。
苹果官方表示：
在线参加 Apple 每年规模最大的开发者盛会。亲眼见证 Apple 最新平台、技术和工具的发布。了解如何创建和改进你的 App 和游戏。与 Apple 设计师和工程师互动交流，与全球开发者社区建立联系。以上活动均免费在线举行。
探索各种新的工具、框架和功能，助力你打造出理想的 App 和游戏。通过视频讲座学习新技能，与 Apple 专家进行一对一会面，以推进你的项目，完善你的构思。
Swift Student Challenge 旨在支持和鼓舞下一代开发者、创作者和企业家。太平洋时间 3 月 28 日，我们将公布今年的获奖者名单。获奖者将有资格参加在 Apple Park 举办的特别活动。我们还会选出 50 名杰出获胜者，他们将受邀前往库比提诺，获得为期三天的非凡体验，包括参加 Apple Park 的特别活动。
3月27日消息，苹果宣布2024年全球开发者大会（WWDC）将于6月10日至6月14日举行，巧合的是，这次大会与端午假期重合。
苹果官方表示：
在线参加 Apple 每年规模最大的开发者盛会。亲眼见证 Apple 最新平台、技术和工具的发布。了解如何创建和改进你的 App 和游戏。与 Apple 设计师和工程师互动交流，与全球开发者社区建立联系。以上活动均免费在线举行。
探索各种新的工具、框架和功能，助力你打造出理想的 App 和游戏。通过视频讲座学习新技能，与 Apple 专家进行一对一会面，以推进你的项目，完善你的构思。
Swift Student Challenge 旨在支持和鼓舞下一代开发者、创作者和企业家。太平洋时间 3 月 28 日，我们将公布今年的获奖者名单。获奖者将有资格参加在 Apple Park 举办的特别活动。我们还会选出 50 名杰出获胜者，他们将受邀前往库比提诺，获得为期三天的非凡体验，包括参加 Apple Park 的特别活动。
RTX 5090要首发 性能要翻倍！三星展示GDDR7显存
三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。
首次推出的GDDR7内存模块密度为16GB，每个模块容量为2GB。其速度预设为32 Gbps（PAM3），但也可以降至28 Gbps，以提高产量和初始阶段的整体性能和成本效益。
据三星表示，GDDR7内存的能效将提高20%，同时工作电压仅为1.1V，低于标准的1.2V。通过采用更新的封装材料和优化的电路设计，使得在高速运行时的发热量降低，GDDR7的热阻比GDDR6降低了70%。
更新动态
2024年11月23日
2024年11月23日
- 凤飞飞《我们的主题曲》飞跃制作[正版原抓WAV+CUE]
- 刘嘉亮《亮情歌2》[WAV+CUE][1G]
- 红馆40·谭咏麟《歌者恋歌浓情30年演唱会》3CD[低速原抓WAV+CUE][1.8G]
- 刘纬武《睡眠宝宝竖琴童谣 吉卜力工作室 白噪音安抚》[320K/MP3][193.25MB]
- 【轻音乐】曼托凡尼乐团《精选辑》2CD.1998[FLAC+CUE整轨]
- 邝美云《心中有爱》1989年香港DMIJP版1MTO东芝首版[WAV+CUE]
- 群星《情叹-发烧女声DSD》天籁女声发烧碟[WAV+CUE]
- 刘纬武《睡眠宝宝竖琴童谣 吉卜力工作室 白噪音安抚》[FLAC/分轨][748.03MB]
- 理想混蛋《Origin Sessions》[320K/MP3][37.47MB]
- 公馆青少年《我其实一点都不酷》[320K/MP3][78.78MB]
- 群星《情叹-发烧男声DSD》最值得珍藏的完美男声[WAV+CUE]
- 群星《国韵飘香·贵妃醉酒HQCD黑胶王》2CD[WAV]
- 卫兰《DAUGHTER》【低速原抓WAV+CUE】
- 公馆青少年《我其实一点都不酷》[FLAC/分轨][398.22MB]
- ZWEI《迟暮的花 (Explicit)》[320K/MP3][57.16MB]