HTML5 LocalStorage 本地存储
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); } }
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。