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