layui实现本地存储方法

这篇文章将为大家详细讲解有关layui实现本地存储方法，文章内容质量较高，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。本地存储是对 localStorage 和 sessionStorage 的友好封装，可更方便地管理本地数据。

10余年的赞皇网站建设经验，针对设计、前端、开发、售后、文案、推广等六对一服务，响应快，48小时及时工作处理。网络营销推广的优势是能够根据用户设备显示端的尺寸不同，自动调整赞皇建站的显示方式，使网站能够适用不同显示终端，在浏览器中调整网站的宽度，无论在任何一种浏览器上浏览网站，都能展现优雅布局与设计，从而大程度地提升浏览体验。成都创新互联从事“赞皇网站设计”,“赞皇网站推广”以来，每个客户项目都认真落实执行。

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

以上便是layui实现本地存储方法，虽然从篇幅上看很复杂，但是示例代码非常详细且容易理解，如果想了解更多相关内容，请关注创新互联行业资讯。