浏览器存储的封装

2022-07-01 05:48:04
2024-10-09 22:07:02

区别

方法名 数据有效期 存储地址 存储空间 应用场景
chookie 如果不设置有效期,那么就是临时存储(存储在内存中),是会话级别的,会话结束后,cookie也就失效了,如果设置了有效期,那么cookie存储在硬盘里,有效期到了,就自动消失了。 在浏览器和服务器间来回传递 不能超过4k 主域名单点登录、浏览器与服务器数据传递
sessionStorage 仅在当前浏览器窗口关闭前有效,自然也就不可能持久保持(在当前页面打开新标签,复制当前页面的sessionStorage到新标签,不同标签不能实现sessionStorage数据共享) 本地保存 可以达到5M或更大 保存临时数据,比如筛选条件数据缓存,防止刷新丢失
localStorage 始终有效,窗口或浏览器关闭也一直保存,因此用作持久数据 本地保存 可以达到5M或更大 保存token等用户信息,vuex持久化等

方法封装

localStorage

js 复制代码
/**
 * localStorage
 * @存储:_local.set('access_token', '123456', 5000);
 * @获取:_local.get('access_token');
 * @删除:_local.remove('access_token');
 * @清空:_local.clear();
 */

var _local = {
  //存储,可设置过期时间
  set(key, value, expires) {
    let params = { key, value, expires };
    if (expires) {
      // 记录何时将值存入缓存,毫秒级
      var data = Object.assign(params, { startTime: new Date().getTime() });
        //添加存储
      localStorage.setItem(key, JSON.stringify(data));
    } else {
        //toString() 方法返回一个表示该对象的字符串,call改变this指向
        //是否为对象或者数组
      if (Object.prototype.toString.call(value) == '[object Object]' || Object.prototype.toString.call(value) == '[object Array]') {
          //JSON.stringify() 方法将一个 JavaScript 对象或值转换为 JSON 字符串
        value = JSON.stringify(value);
      } 
      localStorage.setItem(key, value);
    }
  },
  //获取
  get(key) {
    let item = localStorage.getItem(key);
    // 先将拿到的试着进行json转为对象的形式
    try {
      item = JSON.parse(item);
    } catch (error) {
      // eslint-disable-next-line no-self-assign
      item = item;
    }
    // 如果有startTime的值,说明设置了失效时间
    if (item && item.startTime) {
      let date = new Date().getTime();
      // 如果大于就是过期了,如果小于或等于就还没过期
      if (date - item.startTime > item.expires) {
        localStorage.removeItem(key);
        return false;
      } else {
        return item.value;
      }
    } else {
      return item;
    }
  },
  // 删除
  remove(key) {
    localStorage.removeItem(key);
  },
  // 清空
  clear() {
    localStorage.clear();
  },
};

//export default _local
//import _local from "../utils/localStoragetime";

sessionStorage

js 复制代码
/**
 * sessionStorage
 */
var _session = {
  get: function(key) {
    var data = sessionStorage[key];
    if (!data || data === 'null') {
      return null;
    }
    return JSON.parse(data).value;
  },
  set: function(key, value) {
    var data = {
      value: value,
    };
    sessionStorage[key] = JSON.stringify(data);
  },
  // 删除
  remove(key) {
    sessionStorage.removeItem(key);
  },
  // 清除全部
  clear() {
    sessionStorage.clear();
  },
};

export { _local, _session };
js 复制代码
/**
 * @description 保存cookie
 * @param {String} name 需要存储cookie的key
 * @param {String} value 需要存储cookie的value
 * @param {Number} timer 默认存储多少天
 */
function setCookie(name, value, timer = 1) {
  var Days = timer; // 默认将被保存 1 天
  var exp = new Date();
  exp.setTime(exp.getTime() + Days * 24 * 60 * 60 * 1000);
  document.cookie =
    name + '=' + escape(value) + ';expires=' + exp.toGMTString();
}

/**
 * @description 获取cookie
 * @param {String} name 需要获取cookie的key
 */
function getCookie(name) {
  var arr = document.cookie.match(new RegExp('(^| )' + name + '=([^;]*)(;|$)'));
  if (arr != null) {
    return unescape(arr[2]);
  } else {
    return null;
  }
}

/**
 * @description 删除指定cookie
 * @param {String} name 需要删除cookie的key
 */
function delCookie(name) {
  var exp = new Date();
  exp.setTime(exp.getTime() - 1);
  var cval = getCookie(name);
  if (cval != null)
    document.cookie = name + '=' + cval + ';expires=' + exp.toGMTString();
}

/**
 * @description 清空cookie
 */
function clearCookie() {
  var keys = document.cookie.match(/[^ =;]+(?==)/g);
  var exp = new Date();
  exp.setTime(exp.getTime() - 1);
  if (keys) {
    for (var i = keys.length; i--; ) {
      document.cookie = keys[i] + '=0;path=/;expires=' + exp.toUTCString(); // 清除当前域名下的
      document.cookie =
        keys[i] +
        '=0;path=/;domain=' +
        document.domain +
        ';expires=' +
        exp.toUTCString(); // 清除当前域名下的
      document.cookie =
        keys[i] + '=0;path=/;domain=ratingdog.cn;expires=' + exp.toUTCString(); // 清除一级域名下的或指定的
    }
  }
}

export default { setCookie, getCookie, delCookie, clearCookie };
目录

运营需要亿点资金维持,您的支持,是小白龙创作的动力!!!

昵称
留言
赞赏金额
暂无评论,欢迎留下你的评论