仓储管理 MDB Pro component
存储管理-Bootstrap 5和Material Design 2.0插件
存储组件使您可以管理存储在浏览器内存中的数据。感谢 组件,您可以轻松地添加,删除,获取数据并检查其过期时间。
注意:阅读 API 标签以找到所有可用选项,然后 高级定制
基本例子
存储组件提供添加,删除和获取存储的方法。
设置存储
使用方法 Storage.set()
将数据添加到存储中。您可以测试此方法
使用以下示例。该按钮将调用
Storage.set('date',new Date());
。要再次使用此示例,请按重置
按钮。
设置到期时间
您可以设置本地存储中已保存数据的到期时间(以天为单位)
获取存储空间
如果您已将任何数据保存在存储器中,则可以使用
Storage.get
方法。
删除存储
当不再需要保存在存储器中的数据并且想要删除它们时,请使用
Storage.remove
方法。
检查存储
您可以设置任务以检查数据是否已过期,删除数据并设置回调函数。
设置数据名称
,间隔 interval
(以分钟为单位),以检查频率
到期日期和回调fn
。
进阶范例
为新用户显示模式
使用 showModalNewUser
方法,您可以显示新用户的模式。
单击开始按钮以开始模拟此行为。下次单击模态后不显示任何
直到您单击重置。
下次访问后显示模态
如果您想向再次访问该页面的人显示模式,则可以使用
showModalScoring
方法。输入参数后的信息
多次访问该网站应该会出现该模式。单击开始按钮3次以对此进行测试
特征。
仓储管理 - API
用法
通过JavaScript
Storage.set('date', new Date(), 1);
方法
Name | Description | Example |
---|---|---|
set |
Add new data to local storage |
Storage.set( ... )
|
get |
Get data from local storage |
Storage.get( ... )
|
remove |
Remove data from local storage |
Storage.remove( ... )
|
check |
Check the data has not expired |
Storage.check( ... )
|
Storage.set('name', 'value', 1);
进口
MDB UI KIT 也可与模块捆绑器一起使用。使用以下代码导入 此组件:
import { Storage } from 'mdb-ui-kit';