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);
});
});
