一、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 对基础和封装，支持动态添加存储
