Layui的本地存儲方法-Layui.data的基本使用


本地存儲是對 localStorage 和 sessionStorage 的友好封裝,可更方便地管理本地數據。

  • localStorage 持久化存儲:layui.data(table, settings),數據會永久存在,除非物理刪除。
  • sessionStorage 會話性存儲:layui.sessionData(table, settings),頁面關閉后即失效。注:layui 2.2.5 新增

上述兩個方法的使用方式是完全一樣的。其中參數 table 為表名,settings是一個對象,用於設置key、value。

//【增】:向test表插入一個nickname字段,如果該表不存在,則自動建立。
layui.data('test', {
  key: 'nickname'
  ,value: 'ABC'
});
 
//【刪】:刪除test表的nickname字段
layui.data('test', {
  key: 'nickname'
  ,remove: true
});
layui.data('test', null); //刪除test表
  
//【改】:同【增】,會覆蓋已經存儲的數據
  
//【查】:向test表讀取全部的數據
var localTest = layui.data('test');
console.log(localTest.nickname); //獲得“ABC”

示例操作

//簡單操作
layui.data('cate', {
  key: 'data'
  ,value: [{
    key: 'id'
    ,value: 1
  },{
    key: 'name'
    ,value: 'abc'
  }]
});

//取值
var cate = layui.data('cate');
console.log(cate.data)
//復雜操作
layui.data('cate', {
        key: 'data',
        value: [
            {date: 'id', id: 1, content:'00000'}
            ,{date: 'id', id: 2, content:'11111'}
            ,{date: 'id', id: 3, content:'22222'}
            ,{date: 'id', id: 4, content:'33333'}
            ]
    });
    
    //追加數據
    var cates = layui.data('cate').data;
    cates.push({date: 'id', id: 5, content:'4444444'});
    
    //移除數據
    cates.splice(2,1);
    
    //更新操作
    layui.data('cate', {
        key: 'data',
        value: cates
    });
    
    console.info(layui.data('cate'));

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM