layui的本地存储方法介绍-Layui教程-PHP中文网

layui的本地存储方法介绍

尚

发布： 2019-12-20 17:12:35

转载

5333 人浏览过

layui的本地存储方法介绍

本地存储是对 localStorage 和 sessionStorage 的友好封装，可更方便地管理本地数据。

localStorage 持久化存储：layui.data(table, settings)，数据会永久存在，除非物理删除。

sessionStorage 会话性存储：layui.sessionData(table, settings)，页面关闭后即失效。注：layui 2.2.5 新增

上述两个方法的使用方式是完全一样的。其中参数 table 为表名，settings是一个对象，用于设置key、value。

//【增】：向test表插入一个nickname字段，如果该表不存在，则自动建立。
layui.data(&#39;test&#39;, {
  key: &#39;nickname&#39;
  ,value: &#39;ABC&#39;
});
 
//【删】：删除test表的nickname字段
layui.data(&#39;test&#39;, {
  key: &#39;nickname&#39;
  ,remove: true
});
layui.data(&#39;test&#39;, null); //删除test表
  
//【改】：同【增】，会覆盖已经存储的数据
  
//【查】：向test表读取全部的数据
var localTest = layui.data(&#39;test&#39;);
console.log(localTest.nickname); //获得“ABC”

登录后复制

示例操作

//简单操作
layui.data(&#39;cate&#39;, {
  key: &#39;data&#39;
  ,value: [{
    key: &#39;id&#39;
    ,value: 1
  },{
    key: &#39;name&#39;
    ,value: &#39;abc&#39;
  }]
});

//取值
var cate = layui.data(&#39;cate&#39;);
console.log(cate.data)

登录后复制

//复杂操作
layui.data(&#39;cate&#39;, {
        key: &#39;data&#39;,
        value: [
            {date: &#39;id&#39;, id: 1, content:&#39;00000&#39;}
            ,{date: &#39;id&#39;, id: 2, content:&#39;11111&#39;}
            ,{date: &#39;id&#39;, id: 3, content:&#39;22222&#39;}
            ,{date: &#39;id&#39;, id: 4, content:&#39;33333&#39;}
            ]
    });
    
    //追加数据
    var cates = layui.data(&#39;cate&#39;).data;
    cates.push({date: &#39;id&#39;, id: 5, content:&#39;4444444&#39;});
    
    //移除数据
    cates.splice(2,1);
    
    //更新操作
    layui.data(&#39;cate&#39;, {
        key: &#39;data&#39;,
        value: cates
    });
    
    console.info(layui.data(&#39;cate&#39;));

登录后复制

更多layui知识请关注layui使用教程栏目。

以上是layui的本地存储方法介绍的详细内容。更多信息请关注PHP中文网其他相关文章！