HTML5 LocalStorage 本地存储

2021-11-27 22:30:08

1.localStorage是什么

localStorage用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。

2.localStorage有哪些优点

1. 存储空间

存储空间更大：IE8下每个独立的存储空间为10M，其他浏览器实现略有不同，但都比Cookie要大很多。

2. 服务器

存储内容不会发送到服务器：当设置了Cookie后，Cookie的内容会随着请求一并发送的服务器，这对于本地存储的数据是一种带宽浪费。而Web Storage中的数据则仅仅是存在本地，不会与服务器发生任何交互。

3.接口

更多丰富易用的接口：Web Storage提供了一套更为丰富的接口，使得数据操作更为简便。

4. 存储空间

独立的存储空间：每个域（包括子域）有独立的存储空间，各个存储空间是完全独立的，因此不会造成数据混乱。

当把当前网页或者浏览器关掉并再进入时，localStorage中的数据还是存在的。那么，这个数据是存在什么地方的呢？

查找后发现对于Chrome Browser, 其缺省存在以下地址：

C:/Documents and Settings/UserName/Local Settings/Application Data/Google/Chrome/User Data/Default/Local Storage

在这个目录中可以看到一系列以如下方式命名的文件：

http_login.taobao.com_0.localstorage

http_t.sina.com.cn_0.localstorage

chrome_newtab_0.localstorage

…

可以看到每个名字中都有一个网络地址来标识。尝试用文本文件打开一个文件时，发现其是sqlite3的数据库。以刚才存储的那个文件chrome_newtab_0.localstorage为例，用sqlite3打开：

>sqlite3 chrome_newtab_0.localstorage

sqlite>.schma

CREATE TABLE ItemTable (key TEXT UNIQUE ON CONFLICT REPLACE, value TEXT NOT NULL ON CONFLICT FAIL);

sqlite>.mode column

sqlite>.headers on

sqlite>select * from ItemTable;

 

key         value

———-  ———-

abc         1

bcd         2

id1         abc

id2         bcd

总结：

1)本地存储是以localStorage来操作的，具体为: window.localStorage;

2)localStorage是以(Key, Value)的方式读取和设置的;

3)Chrome中，不同的网址的localStorage是以不同的文件存储的，文件名中包含了相应地址;

4)Chrome中，文件是以sqlite3的数据库方式来存储的;

3.浏览器对localStorage的支持情况

转一个测试结果
Chrome4+ 开始支持localStorage
Firefox3.5+开始支持localStorage
Firefox1.5+支持globalStorage
IE8+支持localStorage
IE7兼容模式支持localStorage
IE5.5+支持userdata
Safari 4+ 支持localStorage
Opera10.5+支持localStorage
Netscape Navigator最后一版（9.0.0.6）支持localStorage，其余版本未测

现在主流的浏览器除ie6，ie7外都支持localstorage，可以支持的用localstorage，不支持的用cookie代替

4.localStorage的用法

localStorage. length:返回现在已经存储的变量数目。
localStorage. key(n):返回第n个变量的键值(key)。
localStorage.getItem(k):和localStorage.k一样，取得键值为k的变量的值。
localStorage.setItem(k , v):和localStorage.k = v一样，设置键值k的变量值。
localStorage.removeItem(k):删除键值为k的变量。
localStorage.clear():清空所有变量。

5.localStorage的实例代码

我们在jquery{cookie插件:实现换肤和排序}上面做一些扩展，让支持localStorage的浏览器渐进增强，不支持的浏览器使用cookie替代。

(function(){
    var $li =$("#skin li");
    $li.click(function(){
        switchSkin( this.id );
    });
    if(window.localStorage){//判断是否支持localStorage
        var cookie_skin = localStorage.getItem("MyCssSkin");
    }else{
        var cookie_skin = $.cookie( "MyCssSkin");
    }
    if (cookie_skin) {
        switchSkin( cookie_skin );
    }
    bindKeyDown();
});
//换肤
function switchSkin(skinName){
    $("#"+skinName).addClass("selected") //当前<li>元素选中
　 　$("#"+skinName).siblings().removeClass("selected"); //去掉其它同辈</li><li>元素的选中
    $("#cssfile").attr("href",skinName+"/css/index.css"); //设置不同皮肤
    if(window.localStorage){
        localStorage.setItem("MyCssSkin" ,  skinName);
    }else{
        $.cookie( "MyCssSkin" ,  skinName);
    }
}
//排序
function bindKeyDown() {
    var foo = $("#sortable").sortable({
        update: function (e, ui) {
        var order = foo.sortable("toArray").join();
            if(window.localStorage){
                localStorage.setItem("sortableOrder", order);
            }else{
                $.cookie("sortableOrder", order);
            }
        }
    });
    var foo = $("#sortable");
    if(window.localStorage){
        var order = localStorage.getItem("sortableOrder");
    }else{
        var order = $.cookie("sortableOrder");
    }
    if (order) {
        $(order.split(‘,‘)).each(function (i, id) {
            $("#" + id).appendTo(foo);
        });
    }
    foo.sortable(‘options‘);
}

6.localStorage在浏览器的保存

例子

//login--登陆
    $("#login_page").bind(‘click‘,function(){
        var formdata = {
            username : encodeURIComponent($(‘#login_username‘).val()),
            password : encodeURIComponent($(‘#login_password‘).val())
        };
        if(formdata.username==‘‘ || formdata.password==‘‘){
            showAlert(‘请输入登录名和密码‘);
            return false;
        }
        getData(‘login‘,formdata,function(data,status){login_page(data,status,formdata)});
    });
//自动登录

    var login_info = window.localStorage[_login_key];
    if(login_info!=‘undefined‘ && login_info!=‘‘){
        login_info = JSON.parse(login_info);
        if(login_info.username!=‘‘ && login_info.username!=‘undefined‘){
            getData(‘login‘,login_info,function(data){
                if((data.status == 1) || (data.status == -1)){
                    _loginStatus = 1;
                }else{
                    _loginStatus = 0;
                }
            });
        }
    }
    //实现对iframe的监听
    if (window.addEventListener) {
        window.addEventListener(‘message‘, function(e){
            if(e.origin == _DOMAIN){
                PayBack(e.data);
            }
        }, false);
    } else if (window.attachEvent) {
        window.attachEvent(‘onmessage‘, function(e){
            if(e.origin == _DOMAIN){
                PayBack(e.data);
            }
        });
    }
//登陆
function login_page(data,status,post){
    if((data.status == 1) || (data.status == -1)){
        //检录登陆信息
        _loginStatus = 1;
        window.localStorage[_login_key] = JSON.stringify(post);
        redirect(‘#account‘);
        getData(‘getuserinfo‘,‘‘,function(data,status){getUserInfo(data,status)});
    }else{
        showAlert(data.info);
    }
}
//注册
function register_page(data,status,post){
    if(data.status > 0){
        //注册后检录登陆信息
        _loginStatus = 1;
        window.localStorage[_login_key] = JSON.stringify(post);
        redirect(‘#account‘);
        getData(‘getuserinfo‘,‘‘,function(data,status){getUserInfo(data,status)});
    }else{
        showAlert(data.info);
    }
}