localStorage和sessionStorage的layuiJS通用模块-云BLOG

一、改进后的模块代码（storage.js）

javascript

复制

layui.define([], function(exports) {
  "use strict";

  function Store(storeType) {
    this.store = storeType === 'local' ? localStorage : sessionStorage;
  }

  Store.prototype = {
    set: function(key, value, expires, updateExpires = true) {
      let finalExpires = this._calculateExpires(expires);
      
      if (!updateExpires) {
        const existing = this._getRawData(key);
        if (existing) finalExpires = existing.expires;
      }

      this.store.setItem(key, JSON.stringify({
        value: value,
        expires: finalExpires
      }));
    },

    get: function(key) {
      const data = this._getRawData(key);
      return data ? data.value : null;
    },

    modify: function(key, newValue) {
      const data = this._getRawData(key);
      if (!data) return false;
      return this.set(key, newValue, data.expires, false);
    },

    remove: function(key) {
      this.store.removeItem(key);
    },

    _getRawData: function(key) {
      try {
        const item = JSON.parse(this.store.getItem(key));
        if (item && (item.expires === null || Date.now() < item.expires)) {
          return item;
        }
        this.remove(key);
        return null;
      } catch (e) {
        return null;
      }
    },

    _calculateExpires: function(expires) {
      if (!expires) return null;
      if (expires instanceof Date) return expires.getTime();
      if (typeof expires === 'number') return Date.now() + expires;
      return null;
    }
  };

  const storage = {
    _instance: {
      local: new Store('local'),
      session: new Store('session')
    },

    set: function(key, value, expires = null, storeType = 'local', updateExpires = true) {
      this._instance[storeType].set(key, value, expires, updateExpires);
    },

    get: function(key, storeType = 'local') {
      return this._instance[storeType].get(key);
    },

    modify: function(key, newValue, storeType = 'local') {
      return this._instance[storeType].modify(key, newValue);
    },

    remove: function(key, storeType = 'local') {
      this._instance[storeType].remove(key);
    },

    local: new Store('local'),
    session: new Store('session')
  };

  exports('storage', storage);
});

二、改进后的使用示例（demo.html）

html

复制

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Storage Demo</title>
  <link href="./layui/css/layui.css" rel="stylesheet">
  <script src="./layui/layui.js"></script>
  <script src="./storage.js"></script>
</head>
<body>
<div class="layui-container">
  <div class="layui-row">
    <div class="layui-col-md6">
      <fieldset class="layui-elem-field">
        <legend>操作面板</legend>
        <div class="layui-field-box">
          <!-- 统一操作 -->
          <button class="layui-btn" onclick="setData()">设置数据（默认local）</button>
          <button class="layui-btn" onclick="getData()">获取数据</button>
          <button class="layui-btn" onclick="modifyData()">修改数据</button>
          <button class="layui-btn layui-btn-danger" onclick="removeData()">删除数据</button>
          
          <!-- 指定存储类型 -->
          <hr>
          <button class="layui-btn layui-btn-warm" onclick="setSessionData()">
            设置Session数据（10秒过期）
          </button>
          
          <!-- 不更新过期时间 -->
          <hr>
          <button class="layui-btn layui-btn-normal" onclick="setWithoutUpdateExpires()">
            设置数据（不更新过期时间）
          </button>
        </div>
      </fieldset>
    </div>
  </div>
</div>

<script>
layui.use(['storage'], function() {
  window.storage = layui.storage;
});

// 统一操作函数
function setData() {
  storage.set('userInfo', { name: '李四', age: 28 }, 30000); // 30秒过期
  layer.msg('已设置local数据');
}

function getData() {
  const data = storage.get('userInfo');
  layer.msg('当前值：' + JSON.stringify(data || 'null'));
}

function modifyData() {
  if (storage.modify('userInfo', '修改为字符串值')) {
    layer.msg('修改成功');
  }
}

function removeData() {
  storage.remove('userInfo');
  layer.msg('已删除数据');
}

// 指定session存储
function setSessionData() {
  storage.set('tempData', { created: new Date() }, 10000, 'session');
  layer.msg('已设置session数据（10秒后过期）');
}

// 不更新过期时间操作
function setWithoutUpdateExpires() {
  // 先设置带过期时间的数据
  storage.set('expireData', '原始值', 60000);
  setTimeout(() => {
    // 30秒后更新值但不更新过期时间
    storage.set('expireData', '新值', null, 'local', false);
    layer.msg('已更新值（保持原过期时间）');
  }, 30000);
}
</script>
</body>
</html>

运行 HTML

三、主要改进说明

统一操作方法：
- 新增通用操作方法：set()/get()/modify()/remove()
- 参数顺序：(key, value, expires, storeType, updateExpires)
- 默认存储类型为local：storeType = 'local'

过期时间控制：

javascript

复制

// 更新值且更新过期时间
storage.set('key', 'value', 60000)

// 更新值但保持原过期时间
storage.set('key', 'newValue', null, 'local', false)

存储类型切换：

javascript

复制

// 操作sessionStorage
storage.set('key', 'value', null, 'session')
storage.get('key', 'session')

删除操作优化：

javascript

复制

// 删除localStorage
storage.remove('key')

// 删除sessionStorage
storage.remove('key', 'session')

内部优化：
- 新增_getRawData方法统一处理数据验证
- 修改modify方法直接复用set逻辑
- 增强参数类型校验和容错处理

四、文件结构建议

复制

project/
├─ lib/
│  ├─ layui/      # layui库
│  └─ storage.js  # 存储模块
└─ demo.html      # 示例文件

五、新功能使用场景

保持过期时间的修改：

javascript

复制

// 首次设置（有效期1分钟）
storage.set('token', 'abc123', 60000)

// 30秒后续期（更新过期时间）
storage.set('token', 'newToken', 60000)

// 不续期的值更新
storage.set('token', 'tempValue', null, 'local', false)

混合存储类型操作：

javascript

复制

// 同时操作两种存储
storage.set('localData', '本地数据', null, 'local')
storage.set('sessionData', '会话数据', null, 'session')

// 批量删除
storage.remove('localData')
storage.remove('sessionData', 'session')

时间对象支持：

javascript

复制

// 使用Date对象设置过期时间
const expires = new Date(Date.now() + 3600000) // 1小时后
storage.set('data', 'value', expires)

这些改进在保持原有功能的基础上，提供了更灵活的存储控制方式，同时保持API的简洁性。

目录CONTENT

localStorage和sessionStorage的layuiJS通用模块

评论区