岱山做网站：如何使用HTML5离线存储在你的网站吗

2019.09.05 岱山做网站

156

岱山做网站除了在HTML5新元素,这一新的网络技术给我们提供了离线存储。有许多类型的离线存储,在本文中,我们将专门讨论sessionStorage和 localStorage 。离线存储让我们保存数据在用户的浏览器中,使我们的web应用程序或游戏没有连接(一段时间)。

在一个真实世界的例子,开发人员可以把离线存储的优势作为一个备份,以防网络连接不可用。他们可以发送数据时重新连接到网络服务器。

如果你问自己如何利用这个浏览器的功能到你的网站,看看这篇文章。

推荐阅读: 离线Mac - MarsEdit WordPress编辑

sessionStorage

sessionStorage 是一种存储在浏览器中暂时存储数据。 sessionStorage中的数据设置键和值的配对,并独家浏览器窗口或选项卡。只要浏览器或选项卡仍然是开放的,数据仍然存在,除非我们有意或我们擦掉它退出浏览器。

sessionStorage来存储数据,我们可以使用 .setItem () 。这是一个例子,我们商店的“Hello World”。

1	sessionStorage.setItem (“keyExample”,“Hello World”);

另外,我们还可以做以下。这将创建一个数据条目 anotherKeyName 的关键, “你好了” 的价值。

1	sessionStorage。 anotherKeyExample =“你好”;

在基于webkit的浏览器,如Safari, Chrome和歌剧,你可以看到下面的数据资源选项卡。在Firefox中,您可以搜索的数据驻留在Firebug DOM选项卡下。

岱山做网站

值得注意的是,sessionStorage只能存储一个字符串或纯文本。一个整数将翻译字符串。

如果你有JSON数据你要格式化字符串使用 JSON.stringify () 和检索使用 JSON.parse () 转换为JSON字符串。下面是一些代码示例:

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

在sesssionStorage检索数据

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

1 2	var 一个= sessionStorage.getItem (“keyExample”); var b = sessionStorage.anotherKeyExample;

sessionStorage删除数据

sessionStorage如上所述,数据将被删除,当用户关闭浏览器的窗口或选项卡。但是我们也可以故意删除它。我们可以使用 .removeItem () 方法或删除指令。

1 2	sessionStorage.removeItem (“keyExample”); 删除 sessionStorage.anotherKeyExample;

localStorage

我们岱山做网站也可以在浏览器中存储数据的一种形式 localStorage 。但与sessionStorage, localStorage数据持久; 数据仍将在浏览器中只要我们不要故意删除它。

将数据存储在localStorage sessionStorage和我们一样容易。事实上,技术都是一样的,只是我们现在使用 localStorage 对象。我们可以输入一个数据条目, .setItem () 方法或直接设置键名,。

1 2	localStorage.setItem (“keyName”,“你好,本地存储”); localStorage。 anotherKeyName = 1;

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

1 2	var c = localStorage.getItem (“keyName”); var d = localStorage.anotherKeyName

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

离线存储限制大小

sessionStorage和localStorage都有限制的最大容量,和每个浏览器都有自己的极限。火狐,Chrome, Opera限制 5 mb 每个域。 Internet Explorer提供了更多的空间,每个域10 mb。所以确保你的数据不会超过这个限制。如果您的数据超过了限制,您可能要考虑其他的选择,如 Sqlite 。