localStorage的用法与封装

最新推荐文章于 2024-08-15 20:33:20 发布

@是静静啊

最新推荐文章于 2024-08-15 20:33:20 发布

阅读量544

点赞数

文章标签： html5

本文链接：https://blog.csdn.net/m0_45272038/article/details/113802531

版权

本文介绍了如何正确使用localStorage存储和检索数据，包括将数组转换为字符串进行存储以及使用JSON.parse还原数据。同时，展示了如何封装两个实用方法：fetch用于获取localStorage中的数据，save用于保存数据。此外，还讨论了如何在localStorage中设置数据的过期时间，以实现自动清理功能。

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

文章目录

localStorage的用法

 let todos = [
        {
            id:1,
            text:"哈哈"
        },
        {
            id:2,
            text:"嘻嘻"
        }
    ];
    localStorage.setItem("todos",JSON.stringify(todos));
    console.log(JSON.parse(localStorage.getItem("todos")));

== 注意 ==
localStorage.setItem(“todos”,todos);
不能直接这么存数组直接存在localstorage中出现的是 todos [object Object],[object Object]
要将其用 **JSON.stringify()转为字符串进行存储
取出是也要注意
localStorage.setItem(“todos”,JSON.stringify(todos));
console.log(localStorage.getItem(“todos”));此时输出的如下数据不能直接进行使用
要将其用JSON.parse()**转为对象进行输出才能直接使用
在这里插入图片描述
console.log(JSON.parse(localStorage.getItem(“todos”)));此时才能输出我们想要用的数据

在localstorage内定定义两个方法

1. fetch(key) => 获取localStorage 中key 的记录返回对象

2. save(key,obj) => 保存 key 为 key对象 => localStorage

    let todos = [
        {
            id:1,
            text:"哈哈"
        },
        {
            id:2,
            text:"嘻嘻"
        }
    ];
     (function(){
         let storageUtil = {
         }
         storageUtil.fetch = function(key){
            let rawObj = localStorage.getItem(key)||"[]";// 不传就为空的[]  字符串
            return JSON.parse(rawObj);
         }
         storageUtil.save = function(key,obj){
             localStorage.setItem(key,JSON.stringify(obj));
         }
         window.storageUtil = storageUtil;
     })();
     console.log(storageUtil);
     storageUtil.save("todos",todos);
     console.log(storageUtil.fetch("todos"));