html5Webstorage
web storage可以以key/value的⽅式保存数据，让我们的app在离线的情况下，依然可以读取上次浏览的记录。web storage 和 cookie的区别
1. 可储存的资料量⼤⼩不同,cookie的容量⼤约只能存4KB,Web Storage的容量⼀般是5MB，不同浏览器可能不同
2. cookie可以放在http的头部发到服务器，服务器可以操作cookie，web storage则不可以。
web storage 分sessionStorage 和localStorage，他们区别如下：
1. sessionStorage属于会话级存储，当浏览器标签关闭或者浏览器关闭，数据便删除
2. localStorage属于本地会话存储，浏览器关闭，数据也不会删除
3. sessionStorage和localStorage存储区域都和⽹站域名有关，不同⽹站域名不能访问各⾃的web storage sessionStorage和localStorage api接⼝⼀样
1. length只读属性，获取对象key/value的记录条⽬
2. key(n)获取对象记录条⽬中第n条记录的key，可以通过该key获取value
3. getItem(key) 通过key获取对象中⼀条记录数据
4. setItem(key,value)设置⼀条记录，如果记录不存在就插进，若存在则更新数据
5. removeItem(key)通过key删除⼀条记录
6. clear() 清空对象数据
sessionStorage保存⽤户购物车数据
<ul>
<li><input type = "checkbox" id = "1" value = "T袖"> T袖</li>
<li><input type = "checkbox" id = "2" value = "帽⼦"> 帽⼦</li>
<li><input type = "checkbox" id = "3" value = "鞋⼦"> 鞋⼦</li>
<li><input type = "checkbox" id = "4" value = "外套"> 外套</li>
</ul>
<button type = "button" id = "buy">查看购物车</button>
<button type = "button" id = "clear">清空购物车</button><br>
总共买了多少：<span id = "length"></span><br>
买了什么：<span id = "buywhat"></span>
//js代码
var $checkbox = $("input[type=checkbox]");
var $btn = $("#buy");
var $clear = $("#clear")
$("click",function(){
if($(this).is(":checked")){
window.sessionStorage.setItem($(this).attr("id"),$(this).attr("value"));//添加⼀条记录
}else{
veItem($(this).attr("id"),$(this).attr("value"));//删除⼀条记录
}
});
$("click",function(){
var length = window.sessionStorage.length;//获取记录条⽬
$("#length").text(length);
var temp = "" ;
for(var i = 0 ;i < length ;i++){
var key = window.sessionStorage.key(i); //获取key
var value = Item(key);//通过key获取value
temp += value + ",";
}
$("#buywhat").text(temp);
})
$("click",function(){
window.sessionStorage.clear(); //清空数据
});
var length = window.sessionStorage.length;//获取记录条⽬
$("#length").text(length);
}
获取服务器新闻列表数据放在localStorage ，断开服务器链接，app通过读取localStorge数据，将之前浏览记录展现在屏幕上
<ul id = "newslist"></ul>
//js代码
var news = {
/**
* 请求数据
*/
reqData : function(){
var that = this ;
$.ajax({ //利⽤ajax请求远程数据
url : "xxx/reqData",
dataType : "json",
success : function(data){//加载数据成功，将最新的数据放到localStroage
window.localStorage.setItem("news",data);
that.initNewsList(data);
},
error : function(error){
that.initNewsList(Item("news"));//服务链接超时或者服务发⽣错误，都直接从本地获取数据        }
});
},
/**
* 初始化数据
*/
initNewsList : function(newslist){
var arr = new Array();
for(var i = 0 ;i < newslist.length ;i++){
var con = wTemp(newslist[i]));
}
$("#newslist").append($(con.join("")));
},
/**
* 数据模版
*/
newsTemp : function(news){
return  ["<li>"+news.title+"</li>"];
sessionstorage和localstorage}
}
浏览器⽀持情况

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。