岱山做网站:如何使用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 。

特征检测

此外,尽管支持sessionStorage和localStorage相当大(IE8支持),您可能仍然想要运行浏览器功能检测在运行一个函数之前sessionStorage或localStorage上贴出一个条目。 这是,这样您就可以添加一个回退功能像饼干的浏览器不支持离线存储形式。

你可以 使用Modernizr 这样做或包装您的脚本条件语句,像这样。

1
2
3.
4
5
如果 (窗口。 localStorage) {
   
}其他的 {
  alert (“localStorage不可用”);
}

结论

离线存储是一个真正伟大的特性,它使web应用程序和游戏脱机工作。 在过去我们还展示了如何利用它在现实的例子。

看看这些 : 如何使用Cookie和HTML5 LocalStorage吗 & 在前端编辑Web内容 。

岱山做网站希望这篇简短的文章可以帮助您开始使用离线存储。


寒枫总监

来电咨询

18868949445

微信咨询

寒枫总监

TOP