HTML5网络存储

if（Modernizr.localstorage）{ //使用localstorage对象存储数据 } else { > alert（'无法存储用户首选项，因为您的浏览器不支持本地存储”）； } setItem（“键”，值'）使我们能够将数据写入本地存储。 如果存储限制超过5MB，则META_EXCEEDED_ERR异常将抛出。因此，在保存数据时，将尝试/捕获块添加到存储代码总是最好的。

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

我们可以通过使用浏览器随附的开发人员工具来检查数据是否存储在本地存储中。例如，在Chrome中，右键单击浏览器，然后选择“检查元素”。选择资源选项卡，然后单击本地存储项目。我们可以看到用户选择的数据以键/值对的形式存储。 可以使用用户设置的背景和字体大小值重新加载网页。 GetItem（“键”）有助于检索数据库中存储的数据。

<span>function applySetting() {
</span>	<span>if (localStorage.length != 0) {
</span>	<span>document.body.style.backgroundColor = localStorage.getItem('bgcolor');
</span>	<span>document.body.style.fontSize = localStorage.fontweight + 'px';
</span>	<span>document.getElementById('favcolor').value = localStorage.bgcolor;
</span>	<span>document.getElementById('fontwt').value = localStorage.fontweight;
</span>	<span>} else {
</span>	<span>document.body.style.backgroundColor = '#FFFFFF';
</span>	<span>document.body.style.fontSize = '13px'
</span>	<span>document.getElementById('favcolor').value = '#FFFFFF';
</span>	<span>document.getElementById('fontwt').value = '13';
</span>	<span>}
</span><span>}</span>

长度函数检索存储区域中的值总数。 可以在车身标签的撞击事件中调用上述功能，如下 可以使用clear（）函数或removeItem（“键”）来清除本地存储区域 功能。在我们的示例中，下面的函数在“清除”按钮的单击事件上调用。

<span>function clearSettings() {
</span>		<span>localStorage.removeItem("bgcolor");
</span>		<span>localStorage.removeItem("fontweight");
</span>		<span>document.body.style.backgroundColor = '#FFFFFF';
</span>		<span>document.body.style.fontSize = '13px'
</span>		<span>document.getElementById('favcolor').value = '#FFFFFF';
</span>		<span>document.getElementById('fontwt').value = '13';
</span>
<span>}</span>

存储事件

当我们从Web存储中设置或删除数据时，将在窗口对象上触发存储事件。我们可以将侦听器添加到事件中，并在需要时处理存储更改。

<span>window.addEventListener('storage', storageEventHandler, false);
</span>	<span>function storageEventHandler(event) {
</span>			<span>applySetting();
</span>	<span>}</span>

事件对象具有以下属性

• 键 - 已更改的属性
>
• > newValue - 新设置的值
• OldValue - 以前存储的值
>
• URL - 事件起源
的完整URL路径
• storagearea - localstorage或sessionstorage对象

请记住，事件仅在其他窗口上发射（不在事件触发的窗口上），如果数据没有更改，则该事件不会被触发。 相同的API方法也适用于会话存储，但该方法应在SessionStorage对象上执行。

结论

因此，现在您可以开始使用Web Storage存储用户首选项，用户信息，会话信息等。您还可以尝试创建可以完全离线使用的应用程序，并且在离线过程中存储的数据可以作为批处理更新发送回服务器当用户再次在线时。

经常询问有关HTML5 Web Storage的问题（常见问题解答）

在HTML5 Web Storage中的SessionStorage和LocalStorage之间有什么区别？它们之间的主要区别在于他们的寿命和范围。 SessionStorage设计为在单个浏览器会话期间的临时存储。会话结束后，即用户关闭浏览器选项卡或窗口后，它就会清除。另一方面，即使浏览器关闭并重新打开，LocalStorage仍然存在。它没有到期时间，并且保留在用户或Web应用程序手动清除之前。网络存储很简单。您可以使用setItem（）方法来存储数据，getItem（）方法来检索数据，以及removeItem（）方法删除数据。例如，要将数据项存储在LocalStorage中，您可以使用localstorage.setitem（“键”，“值”）。要检索这些数据，请使用localstorage.getItem（'key'）。要删除数据，请使用localStorage.removeItem（'key'）。

html5 Web Storage在一定程度上是安全的。它不允许存储敏感的用户信息，例如密码或信用卡号。但是，它容易受到跨站点脚本（XSS）攻击的影响。因此，建议不要存储敏感信息，并在存储数据之前始终验证和消毒。

HTML5 Web Storage的存储限制是什么？

>

> HTML5 Web Storage的存储限制变化在不同的浏览器之间。但是，大多数现代浏览器为LocalStorage提供约5MB的存储空间。 SessionStorage还提供了相同数量的存储空间，但重要的是要记住，此存储是暂时的。

>我可以在所有浏览器上使用HTML5 Web Storage吗？

>

>如何检查浏览器是否支持HTML5 Web Storage？

>您可以通过在JavaScript代码中使用简单的“ if”条件来检查浏览器是否支持HTML5 Web存储。 if（typeof（storage）！==“ undefined”）{// for localstorage/sessionstorage的代码。 } else {//对不起！没有Web存储支持..}

>我可以在HTML5 Web Storage中存储对象或数组吗？但是，由于Web存储仅支持字符串值，因此您需要在存储它们之前使用JSON.STRINGIFY（）将对象或数组转换为字符串。要检索它们，您可以使用JSON.PARSE（）。

>如何将它们转换为对象或数组，我如何清除HTML5 Web Storage中的所有数据？

>您可以清除HTML5中的所有数据使用clear（）方法的Web存储。例如，要清除LocalStorage中的所有数据，您可以使用localstorage.clear（）。

>我可以将HTML5 Web Storage用于离线应用程序吗？

是的，可以使用HTML5 Web Storage用于离线申请。它允许您将数据存储在用户的浏览器上，即使用户离线也可以访问和使用。

>

> HTML5 Web Storage的替代方案是什么？到HTML5 Web存储，包括Cookie，IndexedDB和Web SQL。但是，这些中的每一个都有其自身的优势和缺点，选择取决于您的Web应用程序的特定要求。

以上是HTML5网络存储的详细内容。更多信息请关注PHP中文网其他相关文章！