行业新闻

当前位置:

HTML5 Web存储简介

浏览量:0

       
        网络存储是一种新的HTML5 API,与传统的cookie相比,具有重要的优势。尽管该规范仍处于W3C标准草案状态,但所有主流浏览器均已支持该规范。

这意味着您可以开始使用APIsessionStorage和localStorage对象(我们将在后面讨论)并享受它们的好处。

        1.Cookies的局限性

首先,有Cookies。自早期以来,它们一直是Web的巨大驱动因素。无论是好是坏。例如,cookie允许我们自动登录到我们经常使用的网站,例如Email和社交软件。

另一方面,使用Cookie可以跟踪我们的搜索和浏览历史记录,而我们的隐私是一个问题。

Cookies的另一个问题是它们具有数据容量限制。根据不推荐使用的1997年规范(建议每个cookie至少4096字节),许多Web浏览器中cookie的数据存储限制约为每个cookie 4 KB 。

尽管大多数浏览器允许30到50个cookie,所以如果您超出一个cookie的4 KB限制,则可以创建另一个cookie,但这仍然是一个真正的限制。

这就是为什么开发人员通常只将用户和/或会话标识符存储在cookie中,然后使用服务器端数据库来存储和获取其余用户数据的原因。

此外,cookie的一个经常被忽视的副作用是,它们总是与每个HTTP请求一起发送(通常甚至用于图像),从而导致更多数据通过网络发送。

       2. 通过Web存储向前发展

Web存储从cookie停止的地方开始提取。Web存储的优势至少在于两点。

首先,Web开发人员易于使用:它有一个简单的API来获取和设置键/值对(我们将在下面进一步介绍)。

其次,它提供的空间量:规范默认将磁盘空间配额决定权交给用户代理(即Web浏览器开发人员),并且大多数每个域提供不少于5或10 MB的存储空间。这意味着我们不仅可以在客户端上存储基本的用户/会话信息:用户首选项设置,本地化数据,用于批

处理服务器写入的临时脱机存储等等。
可以使用JavaScript访问存储的数据,这使您能够利用客户端脚本来完成许多传统上涉及服务器端编程和关系数据库的事情。

        3.会话存储和本地存储

重要的是要知道有两种类型的Web存储对象:sessionStorage和localStorage。sessionStorage仅在浏览器选项卡或窗口会话中可用。它旨在将数据存储在单个网页会话中。

localStorage即使在浏览器会话之间也会保留。这意味着当关闭并重新打开浏览器时,数据仍然可用,并且在选项卡和窗口之间也立即可用。

在两种情况下,Web存储数据在不同的浏览器之间都不可用。例如,在Firefox中创建的存储对象不能像Cookie一样在Internet Explorer中访问。

        4.在哪里使用Web存储

实现方案的一些示例包括存储在线任务列表的数据(然后间隔而不是实时推送到服务器)或保存用户放置在购物车中的产品。使用可以在页面请求,多个浏览器选项卡之间以及浏览器会话之间提供数据localStorage。

实际上,您的应用可以完全使用脱机使用localStorage。然后,当用户再次联机时,可以在服务器端发送和存储数据。

从另一个角度来看,当将一些静态数据存储在客户端上以最大程度地减少后续请求的数量时,Web存储可以在性能上大获成功。甚至可以使用Base64编码将图像存储在字符串中。

对于上述示例,可以使用localStorage。那么,您可能想知道何时选择sessionStorage。

在某些情况下,您只想在关闭窗口后立即删除数据。或者,也许您不希望该应用程序干扰在另一个窗口中打开的同一应用程序(例如,当运行某游戏的两个实例或同时运行多个单元测试时,您不希望数据冲突)。这些方案最好与一起使用sessionStorage。

        5.使用Web Storage API

真的很简单。最好只是显示一下:


sessionStorage.setItem('myKey', 'myValue');
var myVar = sessionStorage.getItem('myKey');

localStorage.setItem('myKey', 'myValue');
var myVar = localStorage.getItem('myKey');

请注意,用于创建sessionStorage和的接口localStorage是相同的,并且它们是全局对象。您可以使用该.setItem方法设置键及其值,然后.getItem检索特定键的值。

请注意,我们只能存储字符串,这是一个重大缺陷。但是,要解决此问题,我们可以使用以下JSON.stringify()方法存储和检索JSON对象的字符串表示形式:存储字符串,并JSON.parse()从该字符串创建原始对象。

        6.网络存储事件

每当我们将数据存储在中时localStorage,storage就会在其他浏览器窗口/标签中触发该事件。那有什么好呢?

此事件可用于克服浏览器窗口/选项卡之间的所谓竞争条件:如果用户在不同的选项卡中打开了同一站点,则该事件可用于同步数据。(这实际上是cookie的一个大问题。)

storage仅当新值与旧值不同时才触发该事件。存储事件包含key,oldValue并newValue已更改的数据,你可以在代码中访问的性能。

示例代码:


window.addEventListener('storage', function(event) {
  console.log('The value for ' + event.key + ' was changed from' + event.oldValue + ' to ' + event.newValue);
  }, false);​

上面,我们在事件的window对象上创建了一个事件侦听器storage。当事件发生时,它记录的功能key,oldValue和newValue你的控制台(如其它浏览器的开发者工具)。

        7.浏览器对Web存储的支持和安全问题

建议您立即开始使用此API。IE8和所有现代浏览器几乎都实现了网络存储。该storage事件是后来添加的,但至少在IE9中可用。

请注意,使用Web Storage确实不比cookie安全。权力越大,责任就越大。

SSL可以解决安全问题。(SSL表示客户端和服务器仅通信加密的数据)。这就是为什么您看到越来越多的网站使用更安全的https协议的原因。

无论如何,请勿在客户端存储敏感数据(例如密码和信用卡号),也不要将此类数据发送给客户端。

        8.最后说明

Web存储有时也称为DOM存储,这是同一件事。后者源于以下事实:数据实际上存储在JavaScript的window对象(即window.localStorage和window.sessionStorage)中。

最后但并非最不重要的一点是,请记住,用户可以关闭Web存储,就像cookie一样。因此,您始终需要实施后备机制,以防万一window.sessionStorage或window.localStorage不可用。

 


以上就是作者为您整理的内容。更多讯息请关注武汉悟空云互联网有限公司

[声明]本网整理的媒体稿件是为了分享更多的讯息。此类稿件不代表本网立场,本网不承担此类稿件侵权行为的连带责任。故此,如果您发现本网站的某些内容侵犯了您的版权,请把您的相关内容发至此邮箱【wukongclouds@163.com】,我们在确认后,会立即删除,保证您的版权。