您现在的位置是: 首页 >  Javascript Javascript

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

冬寂 2020-11-27 09:52:29 【Javascript】 6406人已围观

本地存储是对 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'));
很赞哦! ( 41 )

站点信息

  • 建站时间:2020-08-10
  • 文章统计100篇文章
  • 标签管理标签云
  • 统计数据百度统计
  • 微信公众号:扫描二维码,关注我