HTML5 Web Storage 快速入门指南 - 文章教程

HTML5 Web Storage 快速入门指南

发布于 2018-07-08 字数 2514 浏览 1514 评论 0

几乎所有的桌面和移动应用程序都需要在本地储存用户的数据,但是对于网站如何储存用户的数据一直都是在服务端,在过去我们使用过 Cookie,但是他们有比较严重的局限性。HTML5 带给我们更好的方式去解决这个问题。今天我将为你展示 IndexedDB 和 HTML5 Web Storage 这两个 API 的使用方法和说明。

HTML5 Web Storage 快速入门指南

Web Storage 是什么?

一般来说 Web 存储(也被称为 DOM 存储)是指一组 API 来存储数据在客户端的浏览器提供了一个简单的方法。它比 Cookie 更安全和更快读写速度,更不用说更强大。数据存储在用户的浏览器中,所以不像 Cookie 要在发送到服务器。它也可以存储大量的数据比 Cookie 不影响你的网站的性能。 Web Storage 用于存储数据的两个很棒的对象:

  • localStorage 通过使用该对象,你将永久性存储数据,这意味着数据将存储在用户的本地存储,而且没有过期时间。
  • sessionStorage 通过使用该对象,数据存储,你将在那里直到游客关闭浏览器(而不是标签)。这是一个良好的用例是保存喜欢的内容,一个用户填写临时数据,如果他们关闭标签或刷新页面。

现在我们知道了网络存储的是什么,现在是时候让我们的手上。

localStorag

存储这是非常简单的数据保存到存储,你只需要指定一个属性。阅读是一样简单,你可以看到下面的例子:

localStorage.myText = 'This is some text which have been stored with localStorage object';
document.getElementById("text").innerHTML = localStorage.myText;

sessionStorage

存储和检索数据从 sessionstorage 是通过同样的方式:

sessionStorage.myText = 'This is some text which have been stored with sessionStorage object';
document.getElementById("text").innerHTML = sessionStorage.myText;

两个对象都有 setitem()getitem()removeitem() 方法函数,您也可以使用:

localStorage.setItem('username','Johnny');
console.log(localStorage.getItem('username'));
localStorage.removeItem('username');

你也可以在控制台输出他们,并查看它们的长度:

console.log(localStorage.length);
for(var i in localStorage){ console.log(localStorage[i]);}

这些都是使用 Web 存储的基础,但他们将足以让你在你的网络应用程序的 API 的实现。

浏览器的支持

通常是用可怕的 HTML5 的功能的情况下,你必须看看浏览器支持的列表之前利用它。 Web 存储支持的几乎所有的现代浏览器 IE8 + 等,所以它是现成的。不幸的是 IE7 和更早版本的 Internet Explorer 不支持的 API。

如果你对这篇文章有疑问,欢迎到本站 社区 发帖提问或使用手Q扫描下方二维码加群参与讨论,获取更多帮助。

扫码加入群聊

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

目前还没有任何评论,快来抢沙发吧!

关于作者

JSmiles

生命进入颠沛而奔忙的本质状态,并将以不断告别和相遇的陈旧方式继续下去。

2891 文章
评论
84935 人气
更多

推荐作者

时光倒影

文章 0 评论

qq_YyjhCs

文章 0 评论

三人与歌

文章 0 评论

┼──瘾||

文章 1 评论