在本地存储上保存多个对象?Javascript

Question

我{roomId: room1, roomId: room2}有 2 个房间，我想在本地存储上为每个房间保存对象。

对象看起来像

let notifiedRoom = {
roomId: roomId,
dismissed: true
}; 

当用户关闭相应房间的通知时，通知的房间对象将保存在本地存储中。

import React from 'react';
import { toast } from 'react-toastify';

const RoomNotification = (props) => {
const { roomId, message } = props;
const setLocalStorage = (roomId) => {
let notifiedRoom = {
roomId: roomId,
dismissed: true
}; 
localStorage.setItem('notifiedRoom', JSON.stringify(notifiedRoom));
};
const notify = () => {
toast(<div><p>{roomId}</p><p>{message}</p></div>,
{
toastId: roomId,
position: "top-center",
draggable: true,
onClose:() => setLocalStorage(roomId)
});
};
}

我遇到的问题是这一次只会为一个房间保存一个对象。因此，如果您关闭房间1通知，则在本地存储上 有roomId: room01, dismissed: true，如果我关闭房间 2 通知，那么房间 1 的先前本地存储对象将被房间 2 覆盖。

我只需要它在房间 ID 匹配时覆盖。否则，只需在 locatStorage 上为每个不同的 roomId 创建新对象。

非常感谢

Answer 1

与其这样做{roomId: room1, roomId: room2}，不如简单地这样做：

{room1: room1Data, room2: room2Data}

因此，如果您想更新任何一个，例如 room1。

const setLocalStorage = (roomId) => {
const initialUpdateData = JSON.parse(localStorage.getItem('notifiedRoom')) ||{room1:null,room2:null}
let updatedRoom = {
...initialUpdateData,
[updatedRoom]:{
roomId: roomId,
dismissed: true
}
}; 
localStorage.setItem('notifiedRoom', JSON.stringify(updatedRoom));
};

注意：updatedRoom将是您的房间 1 或房间 2

Answer 2

很简单，您只需为新的本地存储命名并为其设置数组即可

localStorage.setItem('1', JSON.stringify(new_array));
localStorage.setItem('2', JSON.stringify(new_array));

像明智的 - 所以它会为每个通知的房间创建新的存储

再次当您需要检索存储时 - 可以通过它的名称检索

var room1= JSON.parse(localStorage.getItem('1'));
var room2= JSON.parse(localStorage.getItem('2'));

希望这就是你要找的

Answer 3

您需要在一个对象中具有唯一键，以便：

{房间 1： {已解除： 真}

， 房间 2： {已解除： 真}}

const setLocalStorage = (roomId) => {
const notifiedRoom = JSON.parse(localStorage.getItem('notifiedRoom'))
notifiedRoom[roomId] = {dismissed: true}
localStorage.setItem('notifiedRoom', JSON.stringify({...notifiedRoom}));
};