HTML5Web存储技术详解：从基础到应用全面解析

html5 web存储

某些技术专家喜欢本机应用程序的原因之一是他们能够在客户端本地存储数据。 HTML5通过允许Web应用程序在浏览器中存储数据而取得了突破。

尽管COOKIE可以用于在浏览器中存储数据&＃xff0c;但存在某些缺点-HTML5 Web存储的发明已解决了这些缺点。

COOKIEs的缺点

• Web浏览器中COOKIE的存储限制被限制为大约4KB。
• COOKIE随每个HTTP请求一起发送&＃xff0c;从而降低了Web应用程序的性能。

什么是HTML5 Web存储&＃xff1f;

它是一个简单的客户端数据库&＃xff0c;允许用户以键/值对的形式保留数据。

它具有相当简单的API&＃xff0c;可以将数据检索/写入本地存储。 每个域最多可以存储10MB数据。 与COOKIE不同&＃xff0c;存储的数据并不包含在每个HTTP请求中。

IE7和更早版本不支持Web存储。 所有其他浏览器&＃xff08;例如Chrome&＃xff0c;Opera&＃xff0c;Firefox&＃xff0c;Safari和IE8 &＃43;&＃xff09;均支持Web存储。

Web存储的类型

本地存储&＃xff1a;存储没有到期日期的数据。 即使关闭或重新打开浏览器/浏览选项卡&＃xff0c;数据也将可用。

会话存储&＃xff1a;存储一个会话的数据。 用户关闭浏览器后&＃xff0c;持久化的数据将被清除。

在这两种情况下&＃xff0c;请注意&＃xff0c;不同浏览器之间将无法使用网络存储数据。

例

让我们直接跳入示例以更好地理解HTML5 Web存储。

我们将创建一个简单的用户设置网页&＃xff0c;使我们可以更改页面的背景颜色和标题字体大小。

从表单的onsubmit事件调用的setSettings函数将允许我们将用户选择的数据保存到本地存储中。

在使用HTML5 Web存储存储数据之前&＃xff0c;我们应该检查浏览器是否支持HTML5存储。

我们可以使用默认的API或Modernizr来检查浏览器的兼容性。

function setSettings() {
if (&＃39;localStorage&＃39; in window && window[&＃39;localStorage&＃39;] !&＃61;&＃61; null) {
//use localStorage object to store data
} else {
alert(&＃39;Cannot store user preferences as your browser do not support local storage&＃39;);
}
}

Modernizr是一个Javascript库&＃xff0c;可帮助我们检测浏览器对HTML5和CSS功能的支持。 下载最新版本的Modernizr&＃xff0c;并将库包含在script元素中。


if (Modernizr.localstorage) {
//use localStorage object to store data
} else {
alert(&＃39;Cannot store user preferences as your browser do not support local storage&＃39;);
}

setItem(&＃39;key&＃39;,&＃39;value&＃39;)允许我们将数据写入本地存储。

如果存储限制超过5MB&＃xff0c;将引发QUOTA_EXCEEDED_ERR异常。 因此&＃xff0c;最好在保存数据的同时向存储代码中添加try / catch块。

function setSettings() {
if (&＃39;localStorage&＃39; in window && window[&＃39;localStorage&＃39;] !&＃61;&＃61; null) {
try {
var favcolor &＃61; document.getElementById(&＃39;favcolor&＃39;).value;
var fontwt &＃61; document.getElementById(&＃39;fontwt&＃39;).value;
localStorage.setItem(&＃39;bgcolor&＃39;, favcolor);
localStorage.fontweight &＃61; fontwt;
} catch (e) {
if (e &＃61;&＃61; QUOTA_EXCEEDED_ERR) {
alert(&＃39;Quota exceeded!&＃39;);
}
}
} else {
alert(&＃39;Cannot store user preferences as your browser do not support local storage&＃39;);
}
}

我们可以使用浏览器随附的开发人员工具检查数据是否存储在本地存储中。 例如&＃xff0c;在Chrome中&＃xff0c;右键单击浏览器&＃xff0c;然后选择“检查元素”。 选择资源选项卡&＃xff0c;然后单击本地存储项。 我们可以看到用户选择的数据以键/值对的形式存储。

可以使用用户设置的背景和字体大小值重新加载网页。 getItem(&＃39;Key&＃39;)帮助检索存储在数据库中的数据。

function applySetting() {
if (localStorage.length !&＃61; 0) {
document.body.style.backgroundColor &＃61; localStorage.getItem(&＃39;bgcolor&＃39;);
document.body.style.fontSize &＃61; localStorage.fontweight &＃43; &＃39;px&＃39;;
document.getElementById(&＃39;favcolor&＃39;).value &＃61; localStorage.bgcolor;
document.getElementById(&＃39;fontwt&＃39;).value &＃61; localStorage.fontweight;
} else {
document.body.style.backgroundColor &＃61; &＃39;#FFFFFF&＃39;;
document.body.style.fontSize &＃61; &＃39;13px&＃39;
document.getElementById(&＃39;favcolor&＃39;).value &＃61; &＃39;#FFFFFF&＃39;;
document.getElementById(&＃39;fontwt&＃39;).value &＃61; &＃39;13&＃39;;
}
}

length函数检索存储区域中值的总数。

免费学习PHP&＃xff01;

全面介绍PHP和MySQL&＃xff0c;从而实现服务器端编程的飞跃。

原价$ 11.95 您的完全免费

免费获得这本书

可以在body标签的onload事件期间onload上述函数&＃xff0c;如下所示

可以使用clear()函数或removeItem(&＃39;key&＃39;)函数清除本地存储区域。 在我们的示例中&＃xff0c;在清除按钮的click事件上调用以下函数。

function clearSettings() {
localStorage.removeItem("bgcolor");
localStorage.removeItem("fontweight");
document.body.style.backgroundColor &＃61; &＃39;#FFFFFF&＃39;;
document.body.style.fontSize &＃61; &＃39;13px&＃39;
document.getElementById(&＃39;favcolor&＃39;).value &＃61; &＃39;#FFFFFF&＃39;;
document.getElementById(&＃39;fontwt&＃39;).value &＃61; &＃39;13&＃39;;
}

储存事件

当我们从Web存储中设置或删除数据时&＃xff0c;将在window对象上触发一个存储事件。 我们可以向事件添加侦听器&＃xff0c;并根据需要处理存储更改。

window.addEventListener(&＃39;storage&＃39;, storageEventHandler, false);
function storageEventHandler(event) {
applySetting();
}

事件对象具有以下属性

• 关键–已更改的属性
• newValue –新设置的值
• oldValue –以前存储的值
• url –事件起源的完整URL路径
• storageArea – localStorage或sessionStorage对象

请记住&＃xff0c;该事件仅在其他窗口上触发&＃xff08;而不在触发事件的窗口上&＃xff09;&＃xff0c;并且如果数据没有更改&＃xff0c;则不会触发该事件。

除应在sessionStorage对象上执行之外&＃xff0c;相同的API方法也适用于会话存储。

结论

因此&＃xff0c;现在您可以开始使用Web存储来存储用户首选项&＃xff0c;用户信息&＃xff0c;会话信息等。您还可以尝试创建可以完全脱机使用的应用&＃xff0c;并且脱机期间存储的数据可以作为批处理更新发送回服务器。当用户再次在线时。

翻译自: https://www.sitepoint.com/html5-web-storage/

html5 web存储