HTML5 WebStorage

29 Aug

Web开发中,必然会遇到需要临时或永久保存的数据。传统用cookie保存在客户端,或通过sessionID关联session对象(如Servlet的HttpSession对象)保存在服务器端。缺点是cookie实在太小,只有4k,已经无法应付现在的大数据时代了。而保存在服务器端很多时候根本没必要,本地保存一下即可,何必再和服务器交互一下呢?因此HTML5出台了新的存储技术:WebStorage

WebStorage分为localStorage和sessionStorage(原本还有一个globalStorage,但在HTML5中已经被localStorage替代了)

localStorage

window.localStorage,通过setItem/getItem来保存获取数据。一旦保存后只能手动调用clear / removeItem来清理。例如页面上输入个人信息,提交表单后,希望将数据保存在本地,下次再打开同样画面时从本地取出数据自动填到表单中,可以省去每次手动填写的麻烦。

localStorage

点击提交表单,将数据保存在本地:

function doAply() {  
    var info = {          //将表单内容保存在对象中,以便JSON化该对象  
        name : "",  
        male : "",  
        address : "",  
        phone : ""  
    };  
  
    info.name = document.getElementById("inputName").value;  //页面上获取Name  
    var temp = document.getElementsByName("male");           //页面上获取Male  
    for(var i=0; i<temp.length; i++) {  
        if(temp[i].checked) {  
            info.male = temp[i].value;  
        }  
    }  
    info.address = document.getElementById("inputAddress").value;  //页面上获取Address
    info.phone = document.getElementById("inputPhone").value;      //页面上获取Phone
  
    //JSON化该对象后,使用setItem方法保存至localStorage中
    localStorage.setItem("myPage_Info", JSON.stringify(info));
    document.P.submit();
}

检查浏览器端的localStorage,确实已经保存成功
browserShow
再次打开页面,从localStorage中读出这些数据,自动填充到页面表单里:

window.onload = init;  
      
function init() {  
    for (key in localStorage) {  
        if(key == "myPage_Info") {  
            var info = JSON.parse(localStorage[key]);  
                  
            //此处开始将对象的属性填充到页面表单里
            document.getElementById("inputName").value = info.name;  
            var temp = document.getElementsByName("male");
            for(var i=0; i<temp.length; i++) {
                if(temp[i].value == info.male) {
                    temp[i].checked = true;  
                }
            }
            document.getElementById("inputAddress").value = info.address;
            document.getElementById("inputPhone").value = info.phone;
            break;
        }
    }
}  

因为localStorage是浏览器的BOM对象,简单地说是全局的。如果将页面的数据一个个保存(而非JSON打包)的话,很快localStorage里面将涌现出大量数据,不便管理。而且非常容易遇到重名问题。因此需要事先考虑如何用JSON打包以避免烦人的重名问题。

sessionStorage

即window.sessionStorage,不再赘述,它的API结构和localStorage完全相同,只要将上述代码中localStorage改成sessionStorage即可,其他代码一行不用改。

localStorage和sessionStorage的区别

区别在于清理的时机,见下表:

storage

○:动作后数据仍在
×:动作后数据清空

可见localStorage中一旦存入数据,该数据将永存(事实上将被浏览器保存到本地硬盘中),只有代码中调用localStorage.clear() / localStorage.removeItem(..)才能清理掉数据。

而sessionStorage中存入数据后,该数据的生命周期等于该页面窗口的生命周期。如果关闭该页面窗口或关闭浏览器,浏览器将自动将sessionStorage清空。如果打开新窗口,原先窗口页面关联的sessionStorage数据在新窗口页面中不可见。因此代码中调用sessionStorage.clear() / sessionStorage.removeItem(..)自然能清理掉数据,但通常不需要开发者操心清理数据的问题,靠浏览器来清理吧。

WebStorage相比cookie的优势

cookie通常只有4K,而WebStorage默认有4M(具体多少以浏览器厂商的说明为准),是cookie的一千倍。如果你想知道你当前浏览器定义的WebStorage究竟有多大,可以写个测试脚本运行一下:

localStorage.clear();  
localStorage.setItem("fuse", "-");  
while(true) {  
    var fuse = localStorage.getItem("fuse");  
    try {   
        localStorage.setItem("fuse", fuse + fuse);  
    } catch(e) {  
        alert("Your browser blew up at " + fuse.length + " with exception: " + e);
        break;
    }
}
localStorage.removeItem("fuse");

本人的Firefox试验下来localStorage有4194304=4096*1024,4M大小。

非要说WebStorage相比cookie有何劣势的话,可能就是性能问题了。第一次访问本地硬盘数据肯定会耗时一点。但除非你的需求对性能要求异常严苛,否则实际证明这点所谓的”性能问题“根本不会造成任何影响,简单地说,普通人根本感受不到任何差异。想了解更多,可以参照这里

Leave a Reply

Your email address will not be published. Required fields are marked *