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

Question

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

对象看起来像

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

当用户关闭相应房间的通知时，notifiedRoom 对象保存在 localStorage 中。


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)
        });
   };

}

我遇到的问题是，这一次只能为一个房间保存一个对象。所以如果你关闭 room1 Notification 然后在 localStorage roomId: room01, dismissed: true，如果我关闭 room2 通知，room1 的先前 localStorage 对象将被 room2 覆盖。

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

非常感谢

Answer 1

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

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 2

除了这样做 {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 3

您需要在一个对象中使用唯一键，因此：

{room1: {dismissed: true}, room2: {dismissed: true}}

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

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

Save multiple objects on Local Storage? Javascript

javascript

local-storage

reactjs

react-toastify