程序员人生 网站导航

网络存储:更简便更强大的客服端数据存储[译]

栏目:htmlcss时间:2013-11-11 03:23:46

导言

随着Javascript的复杂应用和即将推出的的标准和技术,web应用程序变得越来越先进。我们不断依赖这些应用程序,它们中的大部分已成为我们日常生活中的一部分。在Web应用程序开发中,有一个领域一直很匮乏--客服端存储数据的能力。直到现在还是这样。

网络存储是一个W3c规范,它提供了在客服端存储数据的能力,直到最后一个会话(会话存储)或局部存储。这远比传统的cookie强大,也更容易操作。在这篇文章中,我们将了解它并学会使用它。

当前的问题:cookie不堪其重

在继续深入之前,让我们对当前在客户端存储数据的方式cookie作一个简要的回顾,它存在以下问题:

  • 低容量:通常情况下,cookie的最大容量大约为4kb,这对于存储任何类型的复杂数据是远远不够的;
  • 在同一个站点,使用cookie很难跟踪两个或多个事务,这一般发生在两个或多个不同的标签打开时;
  • 使用诸如跨站点脚本技术,cookie可以被探测,这会导致安全漏洞

其他与cookie相关的不常用的技术包括查询字符串、隐藏表单域、基于Flash的本地共享对象,每一个都涉及到安全、易用性、大小限制等一系列相关问题。所以直至现在,我们一直使用非常糟糕的方式在客户端存储数据。我们需要一个更好的方式来完成这一切,这就是网络存储的用武之地。

网络存储

W3C的网络存储规范设计了一种在客户端存储数据的更好的方法。它有两个不同的存储类型:会话存储和本地存储。

这两种存储方式在每个域中大约能存储5MB的数据,这明显多于Cookie。正如我们将要看到的那样,我们将更深入的了解它们,并明白是什么使得网络存储成为一个最好的存储机制。

会话存储

会话存储只有一个目的:在你的会话中记住所有数据,并在你关闭选项卡(或窗口)时尽快忘掉它。

设置和获取数据

要在会话存储中设置键值对,你只需要写一行这样的代码:

sessionStorage.setItem(yourkey, yourvalue);

在此获取数据,只需要这样做:

var item = sessionStorage.getItem(yourkey);

在会话存储中存储值“This is a sample sentence”,你可以这样写:

sessionStorage.setItem(1, 'This is a sample sentence');

注意,这里的key值为1,但并不意味着它是第一个值,它只是将数字“1”转换成字符“1”,并用它作为key值,但这并不意味着将键值对放在第一的位置。

用javascript的alert方法获取那句话,你可以写:

var item = sessionStorage.getItem(1);
alert(item);

另一个setItem()的例子:

sessionStorage.setItem('name', 'john');

你可以用它来获取:

var name = sessionStorage.getItem('name');

删除和清除数据

也有一些从网络存储中删除和清除数据的方法,removeItem()方法用于从列表中删除一个特定项。

var item = sessionStorage.removeItem(yourkey);

记住,你也可以只引用一个数据项的键值,然后从列表中删除它:

var items = sessionStorage.removeItem(1);

clear()方法用来清除列表中的所有项,你可以使用以下方式:

sessionStorage.clear();

您还可以使用length属性来找出存储中键/值对的数量,如:

var no_of_items = sessionStorage.length;

------分隔线----------------------------
------分隔线----------------------------

最新技术推荐