颠覆客户端存储 --- LocalStorage

 

颠覆客户端存储 --- LocalStorage

当我们运行一个桌面应用程序并在其中进行一些修改，那么下一次再打开该程序，会继续上次修改后的状态，桌面应用程序在我们的机器上存储了状态信息，这似乎已经习以为常。然而对于一个站点来说，WEB 传输层 HTTP 的无状态（stateless）使得它们很难像桌面应用程序一样贴近用户。当然，在一些网站上用户可以通过登陆，让服务器存储这些信息，但是似乎并不是每个用户都愿意注册（登陆），也不是每个网站都有用户注册的功能。客户端存储成为WEB开发中的越来越重要的一个环节。

然而，在客户端上存储用户信息一直是WEB应用程序狼狈的一面，在过去相当漫长的一段岁月里，开发者没有选择的使用了 Cookie，很显然 Cookie 技术在 WEB 应用程序发展到今天的地步已经显得力不从心。好在 HTML5 为开发者提供了一套全新的、强大的客户端存储解决方案，在这篇文章中，我们先来了解一下其中的 LocalStorage。

LocalStorage 是 Web Storage存储规范中的组成部分，替换掉了原先的 globalStorage，在Firefox 3.5中开始得到支持。下面是一个使用 localStorage 的例子，试着在下面这个文本框中编辑内容，点击保存按钮将会保存你编辑好的内容，它会始终有效，即便浏览器被关闭，除非点击清除按钮删除掉存储的内容。注意，在整个过程中没有任何被数据发送到服务器，而 Cookie 的内容则是会随着页面请求一并发往服务器。

您没有已保存的编辑

LocalStorage 的使用非常的简单，在这个例子中用到了 setItem 方法，getItem 方法和 removeItem 方法，这已经完全足够了。首先我们检查 key "text" 是否已经存储在 localStorage 之中：

var text = localStorage.getItem('text');
if(!text){
        //没有'text'的key，key === null
        //或'text'中的值为空
	tip.innerHTML = "您没有已保存的编辑";
}else{
        // 'text' 中有值，将其填充到 textarea 中
	editor.value = text;
	tip.innerHTML = "已从上次编辑恢复";
}

正如上面的代码，getItem 方法用以获取指定的信息，它接收一个参数，即要获取的信息的 key。同样的，使用 setItem 方法添加一条存储也是非常地简单：

        localStorage.setItem('text',editor.value);

当用户点击清除按钮的时候，则从 localStorage 中删除相应的记录:

clear.onclick = function(){
	if(confirm("确定清除您的编辑记录？")){
		localStorage.removeItem('text');
		tip.innerHTML = "已删除您的记录";
	}
}

在使用 localStorage 的时候，有一个问题需要注意，localStorage只能存储字符串类型的数据，不过好在这并不会造成太大的影响，JSON.stringify() 和 JSON.parse() 帮助我们方便地在存储和读取的时候在对象和字符串之间相互转换。

var user = {};
user.name = 'Samuel';
user.location = 'kunming';
user.age = 32;
// 添加
localStorage.setItem( 'user', JSON.stringify(user));
// 读取
JSON.parse( localStorage.getItem( 'user' )) ;

参考资料：