html5本地存储localStorage实战（1）(转)

web本地存储方案总结

本地存储解决方案很多，比如Flash SharedObject、Google Gears、Cookie、DOM Storage、User Data、window.name、Silverlight、Open Database等。
借用网上的一张图来看下目前主流的本地存储方案：

Cookie在web中得到广泛应用，但局限性非常明显，容量太小，有些站点会因为出于安全的考虑而禁用cookie，cookie没有想象中的那么安全。
Flash SharedObject之前明河有过介绍，有兴趣的朋友可以看《如何使用kissy的flash本地存储》，使用的是kissy的store模块来调用Flash SharedObject。Flash SharedObject的优点是容量适中，基本上不存在兼容性问题，缺点是要在页面中引入特定的swf和js文件，增加额外负担，处理繁琐；还是有部分机子没有flash运行环境。
Google GearsGoogle的离线方案，已经停止更新，官方推荐使用html5的localStorage方案。
User DataIE的早期版本的本地存储方案，看上去有点怪异，有兴趣的朋友可以看《跨浏览器的本地存储方案一》

localStorage

相对于上述本地存储方案，localStorage有自身的优点：容量大、易用、强大、原生支持；
缺点是兼容性差些（主要是IE8以下版本不支持）、安全性也差些（所以请勿使用localStorage保存敏感信息）。

localStorage的API

非常通俗易懂的接口

• localStorage.getItem(key):获取指定key本地存储的值
• localStorage.setItem(key,value)：将value存储到key字段
• localStorage.removeItem(key):删除指定key本地存储的值

留意localStorage存储的值都是字符串类型，在处理复杂的数据时，比如json数据时，需要借助JSON类，将json字符串转换成真正可用的json格式，localStorage第二个实战教程会重点演示相关功能。
localStorage还提供了一个storage事件，在存储的值改变后触发，比如下面代码：

1. if (window.addEventListener) {
2.     window.addEventListener("storage", storageHandler, false);
3. } else if (window.attachEvent) {
4.     window.attachEvent("onstorage", storageHandler);
5. }
6. function storageHandler(ev){
7.     if(!ev){ev=window.event;}
8.     console.log('改变的字段是'+ev.key);
9.     console.log('旧的值是'+ev.oldValue);
10.     console.log('新的值是'+ev.newValue);
11. }

明河整理的LS类

明河对localStorage进行了封装，写成LS，目前只是显示基础功能，日后会强化这个类，希望可以成为一个通用解决方案。

1. /**
2. * @fileOverview html5本地存储(日后有可能会发布兼容IE8以下版本的IE的本地存储类)
3. * @author 明河<[email protected]>
4. * @version 1.0
5. * @example
6. *          LS.item("key","value");//设置key字段为value
7. *          LS.item("key");//设置key字段的值
8. */
9. var LS = {
10.     /**
11.      * 获取/设置存储字段
12.      * @param {String} name 字段名称
13.      * @param {String} value 值
14.      * @return {String}
15.      */
16.     item : function(name,value){
17.         var val = null;
18.         if(LS.isSupportLocalStorage()){
19.             if(value){
20.                 localStorage.setItem(name,value);
21.                 val = value;
22.             }else{
23.                 val = localStorage.getItem(name);
24.             }
25.         }else{
26.             console.log('浏览器不支持html5的本地存储！');
27.         }
28.         return val;
29.     },
30.     /**
31.      * 移除指定name的存储
32.      * @param {String} name 字段名称
33.      * @return {Boolean}
34.      */
35.     removeItem : function(name){
36.         if(LS.isSupportLocalStorage()){
37.             localStorage.removeItem(name);
38.         }else{
39.             console.log('浏览器不支持html5的本地存储！');
40.             return false;
41.         }
42.         return true;
43.     },
44.     /**
45.      * 判断浏览器是否直接html5本地存储
46.      */
47.     isSupportLocalStorage : function(){
48.         var ls = LS,is = ls.IS_HAS_LOCAL_STORAGE;
49.         if(is == null){
50.             if(window.localStorage){
51.                 is = ls.IS_HAS_LOCAL_STORAGE = true;
52.             }
53.         }
54.         return is;
55.     },
56.     IS_HAS_LOCAL_STORAGE : null
57. };

如何调用？

我们先来创建个评论表单：

1. <form action="">
2.             <p><label for="user">用户名</label></p>
3.             <p><input type="text" size="25" value="" id="user" name="user" class="form-field"> </p>
4.             <p><label for="email">邮箱</label></p>
5.             <p><input type="email" size="25" value="" id="email" name="email" class="form-field"> </p>
6.             <p><label for="site">网站</label></p>
7.             <p><input type="url" size="25" value="" id="site" name="site" class="form-field"> </p>
8.         </form>

接下来我们希望入框失去焦点后记忆输入框的值：（记忆三个字段：用户名、邮箱、网站，这样用户下次进入博客评论时无需重复输入这三个表单域）

1. $(function(){
2.             var val;
3.             //表单内的输入框失去焦点后将数据写入本地存储（字段为输入框id名）
4.             $('.form-field').bind('blur',function(){
5.                 LS.item($(this).attr('id'),$(this).val());
6.             })
7.             //遍历输入框，获取本地存储的相应字段的值，写入到表单输入框内
8.             .each(function(){
9.                 val = LS.item($(this).attr('id'));
10.                 if(val != null) $(this).val(val);
11.             });
12.         })

监听输入框的blur事件，获取该输入框的id作为存储的key名，输入框的值自然是需要存储的值。
在页面结束后，我们还需要遍历下输入框，看看该id存不存在本地储存的值，如果有，将其写入到输入框。

明河结语

这是比较简单的localStorage使用场景，下一篇教程会增加难度，用localStorage来处理网站的“浏览历史”。