sesstionStorage简单封装

最新推荐文章于 2024-09-06 09:09:49 发布

峨M峰

最新推荐文章于 2024-09-06 09:09:49 发布

阅读量259

点赞数

分类专栏： JavaScript 文章标签： javascript 前端

本文链接：https://blog.csdn.net/weixin_46719229/article/details/120528509

版权

JavaScript 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

本文介绍了一种方法，通过封装saveSessionStorage和loadSessionStorage两个函数，来简化对sessionStorage的使用，特别是在处理复杂数据如数组和对象时。这两个函数实现了数据的模块化存储，避免了手动序列化和反序列化的繁琐步骤，并在数据不存在或获取特定属性时提供默认值。这样可以使得sessionStorage的管理更加整洁和高效。

摘要由CSDN通过智能技术生成

sesstionStorage存取函数封装

由于项目中常需用到本地storage存储，复杂的数组、对象等，每次都需要JSON.stringify()和JSON.parse()进行序列化、反序列化操作。
sessionStorage只是简单的key/value形式不断地罗列，当存入的数据变多时显得杂乱无章，可以给数据分不同模块进行存取。

const saveSessionStorage = function(key,val){
    let person = sessionStorage.getItem("person")
     //如果sesstionStorage中没有"person",初始化"person"
    if(!person){
        person = {};
    }else{
        person = JSON.parse(person);
    }
    person[key] = val;
    sessionStorage.setItem("person",JSON.stringify(person))
}

const loadSessionStorage = function(key,def){
    let person = sessionStorage.getItem("person");
    //如果sesstionStorage中没有"person",返回默认值
    if(!person){
        return def
    }
    person = JSON.parse(person);
    //如果"person"中没有要获取的属性,返回默认值
    if(!person[key]){
        return def
    }
    return person[key]
}