localStorage 本地缓存使用

最新推荐文章于 2025-09-24 13:01:43 发布

原创最新推荐文章于 2025-09-24 13:01:43 发布 · 654 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#缓存

java 专栏收录该内容

4 篇文章

订阅专栏

文章展示了如何在JavaScript中使用localStorage进行数据存储。当文件导入导致的数据量过大时，数据会被暂存到缓存中。`storageRoation`函数用于存储数据到localStorage，而`queryRoation`函数则负责从缓存读取并显示在表格中，利用layui库渲染表格。

文件导入功能支持修改的状态下，数据量过大想要可以暂存在缓存中，并且可以从缓存中读取。

实现代码如下：

<div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn" lay-filter="formSubmitBtn" lay-submit>保存</button>
                    <input type="button" class="layui-btn" value="暂存" onclick="storageRoation()" />
                    <input type="button" class="layui-btn" value="读取" onclick="queryRoation()" />

                </div>
            </div>





//暂存方法
 /**
     * 缓存
     */
    function storageRoation () {
        if(window.Storage){
            //轮转集合字符串
            var roationListStr = localStorage.getItem("roationList");

            var roationList;

            if (!roationListStr) {
                roationListStr = "[]";
            }else{
                roationListStr = importData;
            }
            // 转换json对象 我这里就是所以这一步不需要
            // roationList = JSON.parse(roationListStr);

            // 转换为字符串
            roationList = JSON.stringify(roationListStr);


            // 保存到storage
            localStorage.setItem("roationList", roationList);
        }
    };



//读取缓存方法
/**
     * 读取缓存
     */
    function queryRoation () {
        if (!localStorage.hasOwnProperty("roationList"))
            return;

        // 把Storage中的数据绑定到 表格
        if (window.Storage) {
            var roationListStr = localStorage.getItem("roationList");
            var roationList = JSON.parse(roationListStr);
            console.log(roationList)

            //注意这里要使用layui.table
            layui.table.render({
                elem: '#test',
                height: 460,
                page: true,
                data: roationList
                , cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
                , cols: [
                    [
                        {field: 'uname', title: '姓名', width: 120},
                        {field: 'ucode', title: '工号', width: 150},
                    ]
                ],
                done : function(){
                }
            });
        }
    };