html5离线存储怎么使用_如何在您的网站中使用HTML5离线存储

除了HTML5中的新元素外，这项新的网络技术还为我们提供了离线存储 。 离线存储有多种类型，在本文中，我们将专门讨论sessionStorage和localStorage 。 离线存储使我们能够将数据保存在用户的浏览器中，并使我们的Web应用程序或游戏在没有连接的情况下（一段时间）正常工作。

在一个真实的示例中，如果Internet连接不可用，开发人员可以利用脱机存储作为备份。 重新获得连接后，他们便可以将数据发送到在线服务器。

如果您要问自己如何在网站中使用此浏览器的功能，请查看本文。

sessionStorage

sessionStorage是一种将数据临时存储在浏览器中的存储形式。 sessionStorage中的数据在键和值配对中设置，并且是浏览器窗口或选项卡所独有的。 只要浏览器或选项卡仍处于打开状态，数据就仍会存在，除非我们有意删除它或退出浏览器 。

要将数据存储在sessionStorage中，我们可以使用.setItem() 。 这是我们存储“ Hello World”的一个示例。

sessionStorage.setItem("keyExample", "Hello World");

或者，我们还可以执行以下操作。 这将创建一个数据条目，并以anotherKeyName作为键，并以'Hello Too'作为值。

sessionStorage.anotherKeyExample = "Hello Too";

在Safari，Chrome和Opera等基于Webkit的浏览器中，您可以在“ 资源”选项卡下查看数据。 在Firefox中，您可以搜索Firebug DOM选项卡下的数据。

值得注意的是，sessionStorage只能存储字符串或纯文本。 integer将转换为字符串。

如果您具有JSON数据，则必须使用JSON.stringify()将其格式化为字符串，然后使用JSON.parse()进行检索，以将字符串转换回JSON。 以下是一些代码示例：

var json = JSON.stringify({[1, 2, 3]});
sessionStorage.anotherKeyExample = json;

在sesssionStorage中检索数据

我们还有两种方法可以从sessionStorage检索数据。 首先，我们可以使用.getItem()或直接指向键名，如下所示。

var a = sessionStorage.getItem("keyExample");
var b = sessionStorage.anotherKeyExample;

删除sessionStorage中的数据

如上所述，当用户关闭浏览器的窗口或标签时，sessionStorage中的数据将被删除。 但是我们也可以有意删除它。 我们可以使用.removeItem()方法或delete指令，就像这样。

sessionStorage.removeItem("keyExample");
delete sessionStorage.anotherKeyExample;

本地存储

我们还可以将数据以localStorage的形式存储在浏览器中。 但是与sessionStorage不同的是，localStorage数据是持久的。 只要我们不故意删除数据，这些数据就会保留在浏览器中。

将数据存储在localStorage中就像在sessionStorage中一样容易。 实际上，除了现在我们使用localStorage对象之外，技术上都是一样的。 我们可以使用.setItem()方法输入数据条目，也可以直接使用键名设置它，就像这样。

localStorage.setItem("keyName", "Hello, Local Storage");
localStorage.anotherKeyName = 1;

我们使用.getItem()方法检索数据。

var c = localStorage.getItem("keyName");
var d = localStorage.anotherKeyName

同样，我们可以使用.removeItem()方法和delete指令从localStroge删除数据条目。

脱机存储限制大小

sessionStorage和localStorage在最大容量方面都有限制，每个浏览器都有自己的限制。 Firefox，Chrome和Opera的每个域限制为5MB 。 Internet Explorer提供了更多空间，每个域10MB。 因此，请确保您的数据不会超出限制。 如果您的数据超出限制，则可能需要考虑其他替代方法，例如SQLite 。

特征检测

另外，即使对sessionStorage和localStorage的支持非常强大（IE8都支持它们），您可能仍想运行浏览器功能检测，然后再运行将条目发布到sessionStorage或localStorage的功能。 这样可以在浏览器不支持“离线存储”表单的情况下添加像Cookie一样的后备功能。

您可以使用Modernizr来执行此操作，也可以使用此条件语句来包装脚本，就像这样。

if ( window.localStorage ) {
	
} else {
	alert('localStorage is not available');
}

结论

脱机存储是一项非常出色的功能，可以使Web应用程序和游戏脱机工作。 过去，我们还向您展示了如何在实际示例中利用它。

我希望这篇简短的文章可以帮助您开始使用离线存储。

翻译自: https://www.hongkiat.com/blog/html5-offline-storage/