本地存储是对 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'));

Layui的本地存储方法-Layui.data的基本使用的更多相关文章

  1. json常用方法和本地存储方法

    1.JSON.parse()[把json字符串解析成json对象] 2.JSON.stringify()[把json对象中解析成json字符串] <script> let obj = '{ ...

  2. HTML5本地存储(Local Storage) 的前世今生

    长久以来本地存储能力一直是桌面应用区别于Web应用的一个主要优势.对于桌面应用(或者原生应用),操作系统一般都提供了一个抽象层用来帮助应用程序保存其本地数据 例如(用户配置信息或者运行时状态等). 常 ...

  3. todolist 包含本地存储知识

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. H5本地存储:sessionStorage和localStorage

    作者:心叶时间:2018-05-01 18:30 H5提供了二种非常好用的本地存储方法:sessionStorage和localStorage,下面分别介绍一下: 1.sessionStorage:保 ...

  5. 关于本地存储构成数组以及jquery的inArray方法的使用

    for (var i=0, j = _self.sessionStorage.length; i < j; i++){ var key = _self.sessionStorage.key(i) ...

  6. 原生JavaScript常用本地浏览器存储方法五(LocalStorage+userData的一个浏览器兼容类)

    基于LocalStorage+globalStorage+userData实现的一个本地存储类 userData用来兼容ie6 ie7 由userData模仿Session的方法:浏览器关闭删除保存的 ...

  7. 原生JavaScript常用本地浏览器存储方法四(HTML5 LocalStorage sessionStorage)

    HTML5 LocalStorage浏览器的支持的情况如上图,IE在8.0的时候就支持了.不过需要注意的是,IE测试的时候需要服务器环境(或者localhost). 测试自然是检测浏览器是否支持本地存 ...

  8. 原生JavaScript常用本地浏览器存储方法一(方法类型)

    有时需要将网页中的一些数据保存在浏览器端.好处就是当下次访问页面时,直接就可以从本地读取数据,不需要再次向服务器请求数据.目前常用的有以下几种方法: 1.cookie cookie会随着每次HTTP请 ...

  9. layui常见弹窗使用方法

    1:confim类型使用方法 layui.use('layer', function(){ layer.confirm('是否立即上传卷宗信息?', {    btn: ['是','否'],    t ...

随机推荐

  1. git删除了本地文件,从远程仓库中恢复

    在本地删除了文件,使用git pull,无法从远程项目中拉取下来 具体操作 查看项目的状态,会显示出你删除的数据 git status 进入被删除的文件的目录下,假设删除的文件名为 test.txt ...

  2. linux 6.5 网卡

    启动网卡 ifup eth0 eth0:网卡名称 设置网卡开机启动 vi /etc/sysconfig/network-scripts/ifcfg-eth0 ONBOOT=yes

  3. Spring是如何保证同一事务获取同一个Connection的?使用Spring的事务同步机制解决:数据库刚插入的记录却查询不到的问题(转)

    前言 关于Spring的事务,它是Spring Framework中极其重要的一块.前面用了大量的篇幅从应用层面.原理层面进行了比较全方位的一个讲解.但是因为它过于重要,所以本文继续做补充内容:Spr ...

  4. 【Java 基础】Java日期格式问题

    1. Use SimpleDateFormat to format Date. Watch out, SDF is NOT THREAD-SAFE, it might not be important ...

  5. 阿里云esc 登录时的相关提示

    1. 如果该ecs 未绑定密钥对,可以通过常规的用户名密码登录 2. 如果该 ecs 绑定了密钥对,则需要通过私钥进行登录 3. 如果使用 比如 securityCRT 登录时报 " A p ...

  6. Ajax异步更新网页(使用jQuery)

    jquery下载链接:https://pan.baidu.com/s/1KWQVpPV-RwhwGeBaXbZdVA 提取码:vn7x 一.页面代码 <!DOCTYPE html> < ...

  7. 对于React各种状态管理器的解读

    首先我们要先知道什么是状态管理器,这玩意是干啥的? 当我们在多个页面中使用到了相同的属性时就可以用到状态管理器,将这些状态存到外部的一个单独的文件中,不管在什么时候想使用都可以很方便的获取. reac ...

  8. LuoguP7094 [yLOI2020] 金陵谣 题解

    Content 有 \(t\) 组询问,每组询问给定四个整数 \(a,b,c,d\),请求出满足 \[\dfrac{a}{x}+\dfrac{b}{c}=\dfrac{d}{y} \] 的正整数对 \ ...

  9. layer 如何加上关闭框

    layer 如何加上关闭框

  10. 二、Uniapp+vue+腾讯IM+腾讯音视频开发仿微信的IM聊天APP,支持各类消息收发,音视频通话,附vue实现源码(已开源)-腾讯云后台配置TXIM

    项目文章索引 1.项目引言 2.腾讯云后台配置TXIM 3.配置项目并实现IM登录 4.会话好友列表的实现 5.聊天输入框的实现 6.聊天界面容器的实现 7.聊天消息项的实现 8.聊天输入框扩展面板的 ...