Javascript 当数据类型不同时，如何改进 localstorage 的可重用辅助函数？

Question

我为我的 React 应用程序编写了一个 localstorage 帮助器，以使其可重用，但感觉不太好重用。如果我保存或删除一个项目，它取决于存储数据类型：如果它是数组，我遍历它，如果它是一个对象或字符串，我不能做同样的事情。所以现在我有单独的功能（saveItemToArray、saveItemToObject 等）。我还尝试编写一个通用函数，在其中检查数据类型并根据该函数执行不同的操作，但这似乎也不实用。有好的解决办法吗？非常感谢！

export const localStorageHelper = {
    load: (key) => {
        return JSON.parse(localStorage.getItem(key))
    },
    saveToArr: (item, storageID) => {
        let storage = localStorageHelper.load(storageID);
        if (!storage) storage = [];
        localStorage.setItem(storageID, JSON.stringify([...storage, item]))
    },

    saveItemToObject: (item, storageID) => {
        let storage = localStorageHelper.load(storageID);
        if (!storage) storage = {};
        localStorage.setItem(storageID, {...storage, item});
    },
    removeItemFromArray: (removedItem, storageID) => {
        let storage = localStorageHelper.load(storageID);
        let updatedStorage = storage.filter((item)=> item !==removedItem);
        localStorage.setItem(storageID, JSON.stringify(updatedStorage))
    },
    //...
};

Answer 1

还有更多共享部分是您提取出来的：

export const localStorageHelper = {
    load(key) {
        const stored = localStorage.getItem(key);
        return stored == null ? undefined : JSON.parse(stored);
    },
    store(key, value) {
        localStorage.setItem(key, JSON.stringify(value));
    },
    modify(key, fn) {
        this.store(key, fn(this.load(key)));
    },
    appendItemToArray: (item, storageID) => {
        this.modify(storageID, (storage = []) => [...storage, item]);
    },
    removeItemFromArray: (item, storageID) => {
        this.modify(storageID, (storage = []) => storage.filter(s => s !== item));
    },
    saveItemToObject: (item, storageID) => {
        this.modify(storageID, (storage = {}) => ({...storage, item}));
    },
    //...
};

但是，是的，使用不同的方法来做不同的事情是更好的方法。它们不是根据所看到的数据类型尝试变得聪明的通用方法，而是完全按照您的意愿行事 - 如果数据类型不匹配而不是做不可预测的事情就会失败。

Answer 2

我为此创建了一个可重复使用的 storage service（纯正而非第三方），您可以使用它很容易并在其中保存任何数据（可以转换为 JSON）。

好处：
1- 错误已处理，您可以扩展它
2- 保存 non-primitive 对象等数据
3- 设置或删除多个项目

用法：

import { ls } from "storage-service";

ls.set("user-data" , { name: "John Doe" })  // you don't need JSON.stringify
ls.get("user-data")  // you don't need JSON.parse

// Output:  { name: "John Doe" }

Javascript 当数据类型不同时，如何改进 localstorage 的可重用辅助函数？

Javascript how to improve reusable helper function for localstorage when data types differ?

javascript

local-storage

code-reuse