百网思正是上线了。欢迎围观

js 对 LocalStorage 和SessionStorage 对基础和封装,支持动态添加存储

前端 sinalmq 1207浏览 0评论

一、LocalStorage 俗称本地永久存储

前言本篇文章是讨论本地存储的基本的使用方法,存储、删除和修改,不去关注,底层的实现逻辑。当然基本方法可以足够应对工作了。

localStorage 操作中所有入参都是字符串

1、存储

LocalStorage的存储方法是通过setItem()函数,传人类型键和值的;

// 存入一个LocalStorage 的基本用法
  localStorage.setItem('key','value')

2、修改

关于修改, localStorage 没有提供单独的方法,只能在setItem中做文章,键不变,值改变值就可以

 //修改和存储是同一个方法
localStorage.setItem('key''newValue')

3、删除

删除对应的具体的key值

// 删除操作
 localStorage.removeItem('key');

删除所有的key和value

// 删除了所有的localStorage键和值
 localStorage.clear();

二、sessionStorage 方法和上面一模一样

三、通过json 对象 封装存储 LocalStorage,带来优秀的操作

额,突然不知道写这篇文章的目的了。哈哈哈

以上肯定不是我想写的。

在实际开发中,如果直接使用setItem的('key','value')的方式直接存储,如果要存储一个表单数据,一个表单10个字段,在提交的时候直接从缓存里面拿,那估计的累死。 那么我们能不能用一个对象存储和管理呢比如:

let formdata = {
      name: '张三',
      sex: '男',
      likes: ['足球', '泰拳', '撩妹'],
      weixin: '000000'
    };

怎么做呢? 当然不论怎么改变。还是的依赖setItem的('key','value'),由于是支持key和value的形式存储和只能是字符串。接下来需要做几件事情。来达到这个目的

首先把json对象拆分为 key 和 value

key='formdata'
value = JSON.stringify(formdata)

借助JSON.stringify可以把json对象转化为字符串。

然后在通过setItem 方法就可以保存到localStorage的本地缓存中

let formdata = {
      name: '张三',
      sex: '男',
      likes: ['足球', '泰拳', '撩妹'],
      weixin: '000000'
    };
localStorage.setItem('formdata', JSON.stringify(formdata));

封装一下让存储友好一点

function modifyLocalStorage (storage, keyObj) {
    var storageList = JSON.parse(localStorage.getItem(storage));
    if (!storageList) {
      storageList = {};
    }
    for (var key in keyObj) {
      if (keyObj.hasOwnProperty(key)) {
        // 添加或修改
        if (keyObj[key]) {
          storageList[key] = keyObj[key];
        }

        // 删除
        if (!keyObj[key] && storageList[key]) {
          delete storageList[key];
        }
      }
    }
    localStorage.setItem(storage, JSON.stringify(storageList));
  }

使用呢

继续上面的例子就可以;

// 注意 第二个参数formdata 是json对象 第一个参数是字符串
modifyLocalStorage('formdata',formdata)

第二个参数也可以直接{name:'lisa'} 传入

保存好之后需要取出来才能完事

取出来就很简单了直接上一个封装好的方法,自己看,封装的参数自己喜好封装,我个人喜好用对象做为入参

function getLocalStorage (paraObj) {
    var setting = {
      arr: [], // 键值名称
      storage: 'key',
      cb: 'callback' // 回调
    };
    // 参数处理
    for (var x in setting) {
      if (paraObj.hasOwnProperty(x)) setting[x] = paraObj[x];
    }
    // 获取key
    var storageList = JSON.parse(localStorage.getItem(setting.storage));
    var obj = {}, arr = setting.arr;
    // 检索需要的内容
    arr.forEach(function (cur, index) {
      if (storageList && storageList[cur]) {
        obj[cur] = storageList[cur];
      } else {
        obj[cur] = '';
      }
    });
    // 通过回掉方法返回
    if (setting.cb && typeof setting.cb === 'function') {
      setting.cb(obj);
    } else {
      return obj;
    }
  }

取出上面例子中name和sex对应的值

getLocalStorage({
      storage: 'formdata',
      arr: ['name','sex'],
      cb: (d) => {
      // 获取到name
       let name = d.name
       // 获取到sex
       let sex = d.sex
      }})

也可以用Promise 封装获取函数。实现链式调用

转载请注明: 百网思 » js 对 LocalStorage 和SessionStorage 对基础和封装,支持动态添加存储

喜欢 (9) or 分享 ( 0)

发表我的评论

您尚未登录,请 登录注册 后评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
(0)个小伙伴在吐槽