颠覆客户端存储 --- LocalStorage
然而,在客户端上存储用户信息一直是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' )) ;