html5本地存储-localStorage

html5本地存储有两类。
localStorage -一般保存在客户端计算机，在移动端浏览器中，一般情况是永久保存
sessionStorage – 数据保存在当前会话中，或者当前窗口，当前窗口新建的窗口，相关联的标签

1、在使用之前先检查浏览器是否可以支持Web Storage。

if(window.localStorage){ 
} 
if(window.sessionStorage){
}

2、赋值和调取

var userData={
name:"www",
account:"san",
level:2,
disbled:true
}
//存储userData数据
localstorage.setItem("userData",JSON.stringify(userData));

//读取userData并赋值给新变量
var newUserData=JSON.parse(localStorage.getItem("userData"))

3、删除数据

//删除本地存储的key为那么的Item
localStorage.removeItem("name");

//删除localStorage所有key/value键值对，Item
localStorage.clear()

PS：JSON.stringify()把字符串转换成对象；JSON.parse()把对象转换成原来的数据格式。

手机App实例：

/**
* localStorage保存数据
* @param String key 保存数据的key值
* @param String value 保存的数据
*/
function setLocVal(key,value){
window.localStorage[key] = value;
}

/**
* 根据key取localStorage的值
* @param String key 保存的key值
*/
function getLocVal(key){
if(window.localStorage[key])
return window.localStorage[key];
else
return “”;
}

/**
* 清除缓存
* @param String key 保存数据的key，如果不传清空所有缓存数据
*/
function clearLocVal(key){
if(key)
window.localStorage.removeItem(key);
else
window.localStorage.clear();
}

a页面存储

function openDetails(i){
var Arr=[‘投保指南’,’投保流程’,’常见问题’];
setLocVal(‘mName’,JSON.stringify(Arr[i]));
setLocVal(‘mNo’,JSON.stringify(i)); //
openNewWin(‘wytb’, ‘wytb.html’);
}

b列表页面接收

var mN = JSON.parse(getLocVal(“mN”));
var mNn = JSON.parse(getLocVal(“mNo”));

function showGoods(){
$toast(‘数据加载中…’);
if(mNn==2){
$closeToast();
$.getJSON(mN, function(data){
if (status==0&&data&&data.data.length) {
$closeToast();
var arrData = data.data;
var tmpl = ‘<div class=\”ub ub-ac ub-pc ub-pj uinn umar-t c-wh\” ontouchstart=\”zy_touch(\’t-org\’)\” onmousedown=\”zy_touch(\’t-org\’);\” onclick=\”openDetails(\’${href}\’);\”>’
+'<div class=”ulev-app2″>${title}</div>’
+'<div class=”arrow ub-img umwh”>’
+'</div>’
+'</div>’
var s = zy_tmpl(tmpl, arrData, zy_tmpl_count(arrData));
$$(‘mytb’).innerHTML=s;
Imgclick();
}else {
$$(‘mytb’).innerHTML= ‘<div class=”ub ub-ac ub-pc uinn”>暂时没有数据</div>’;
}
});
}else{
$.getJSON(mN, function(data){
if (data&&data.length) {
$closeToast();
var arrData = data;
arrData=JSON.stringify(arrData);
arrData=arrData.replace(/height.*?\/>/gi,”\/>”);
arrData=JSON.parse(arrData);
var tmpl = ‘<div class=\”uba b-gra ub ub-ver c-wh uinn umar-t\”>’ +
‘<div class=\”ubb b-gra ub uinn3\”>’ +
‘<div class=\”t-org ulev-app2\”>${title}</div>’ +
‘</div>’ +
‘<div class=\”uinnh1 t-gra1 ulev-app2 c-wh\”>’ +
‘<span>${text}</span>’ +
‘</div>’ +
‘</div>’
var s = zy_tmpl(tmpl, arrData, zy_tmpl_count(arrData));
$$(‘mytb’).innerHTML=s;
Imgclick();
}else {
$$(‘mytb’).innerHTML= ‘<div class=”ub ub-ac ub-pc uinn”>暂时没有数据</div>’;
}
});
}
}

//打开详情页面
function openDetails(url){
setLocVal(‘mHref’,JSON.stringify(lPath+’?url=’+url));//存值
openNewWin(‘wytb_detail’,’wytb_detail.html’);
}

//手机相册调取
function Imgclick(){
var Img = document.getElementsByTagName(‘img’);
for (var i = 0; i < Img.length; i++) {
Img[i].onclick=function(){
uexImageBrowser.open([this.src]);
}
}
}

c页面-详情页面

function sortList(){
$$(‘Info’).innerHTML=””;
$toast(‘数据加载中…’);
$.getJSON(liPath, function(data){
$closeToast();
if (data!=0) {
data.content=data.content.replace(/FONT-SIZE: 12pt/gi,””);

//详情模板

var liPath = JSON.parse(getLocVal(“mHref”));
var tmpl = ‘<div class=”ubb b-gra ub uinn3″>’
+'<div class=”t-org ulev-app2″>’+data.title+'</div>’
+'</div>’
+'<div class=”uinnh1 t-gra1 ulev-app2 c-wh”>’
+'<span>’+data.content+'</span>’
+'</div>’;
$$(‘Info’).innerHTML=tmpl;
}
else {
$$(‘Info’).innerHTML= ‘<div class=”ub ub-ac ub-pc uinn”>暂时没有数据</div>’;
}
});
}