html5长时间本地存储,html5 localStorage 本地存储

HTML5 提供了两种在客户端存储数据的新方法：

localStorage - 没有时间限制的数据存储

sessionStorage - 针对一个 session 的数据存储

存储数据到本地

setItem()作为 localStorage 接口的方法，接受一个键名和值作为参数，将会把键名添加到存储中，如果键名已存在，则更新其对应的值。

语法

storage.setItem(keyName, keyValue);

如下图：将选择好的分类存储到本地。

image.png

//将选择好的分类，存储到本地

$("#btn-choice-tags").on('click',function(){

//定义两个数组

var das,localdata = [];

function Das(keys,value){

this.CategoryName = keys;

this.CategoryCode = value;

}

$("#selected-category button").each(function(){

var CategoryCode=$(this).attr('id');

var CategoryName=$(this).text();

das = new Das(CategoryName,CategoryCode);

//push() 方法可向数组的末尾添加一个或多个元素

localdata.push(das);

//本地存储

localStorage.setItem(window.location.host + "_middle_nav", JSON.stringify(localdata));

//清除在编辑区的已选择的分类

$("#selected-category button").remove();

});

location.reload();

});

效果如下(mac safari浏览器)：

image.png

从本地存储读取数据

语法：

var data=localStorage[keyName]

//从本地存储加载数据

$(document).ready(function(){

var localdata=JSON.parse(localStorage[window.location.host + "_middle_nav"]);

$("#myTab li").remove();

$("#tab-content div").remove();

$.each(localdata,(key,value) => {

var CategoryName = value.CategoryName

var CategoryCode = value.CategoryCode

do_add_nav(CategoryCode,CategoryName);

});

});