本地存储在HTML5中的应用

本地存储在HTML5中的应用

本地存储是HTML5在JS中新的API,它允许我们将数据保存在用户浏览器中。它与cookies的区别如下:

cookies有有效期,localStorage没有除非主动清除

localStorage不会被通过HTTP请求出发送,必须主动请求

localStorage可以存储比cookies更多的数据

localStorage的API更简洁、便利

 

来看一个示例:

/* Set some data */

localStorage.setItem("key", "value");

 

/* Get some data */

localStorage.getItem("key");

 

不需要库这些东西,它就是一个js。让我们来看下一些网页中对它的应用,也许你可以通过这些激发出你自己的一些想法。

 

正在使用localStorage的网站

Snapbird(http://snapbird.org/)这个网站会记录你上一次进行的搜索。当你下次来到这个网站的时候,它会选择性的指出你会搜索那些人并且对这些操作进行第二次保存。这些功能很明显都是非常有用的,使用的技术就是localStorage。

Snapbird 对localStorage的演示

Typekit(http://typekit.com/)有一个查看字体的测试工具。 你可以输入你自己的文本,然后查看对应字体的样子。不幸的是,当你选择其他字体的时候,你会发现你原来输入的文本不见了。这里将是使用localStorage的一个绝佳之地。当某个部分的值改变之后,将其存储在localStorage中,然后在页面重新加载的时候加载这个值。我想那将非常棒,而且也更加符合用户体验。

 

通过上面的例子,我们可以看到localStorage在未来的网站建设过程中将会发挥很好的作用。上面只是一些简单的示例,类似的内容还有很多。大家可以根据这些内容发展一些延伸。