如何遍历window.localStorage

Question

当我尝试迭代

window.localStorage

时，我似乎没有得到我设置的任何键/值返回。

首先，我在

window.localStorage.length

.

上得到 undefined

我有一个通过并按预期运行的测试设置，我的问题是当我尝试删除以文本开头的项目并且我必须迭代

window.localStorage

.

我怀疑我的间谍有问题

我有两种方法要测试：

export function deleteItem() {
  const item = window.localStorage.getItem('myItem');
  console.log(item);
  // Logs out 12345 when running test 1

  if (item) {
    window.localStorage.removeItem('myItem');
  }
}

export function deletePrefixedItem() {
  let deleted = false;
  console.log(window.localStorage.length);
  // Prints out undefined when running test 2
  
  console.log(window.localStorage);
  // Prints out { getItem: [Function: getItem], setItem: [Function: setItem], removeItem: [Function: removeItem], clear: [Function: clear] }

  for (let i = 0; i < window.localStorage.length; i++) {
    const key = window.localStorage.key(i);
    if (key.startsWith("myItem") && key !== "myItem") {
      window.localStorage.removeItem(key);
      console.log(`Item with key '${key}' deleted from local storage.`);
      deleted = true;
    }
  }
  if (!deleted) {
    console.log(`No key starting with 'myItem' followed by random text found in local storage.`);
  }
}

测试 1（顺利通过并且表现符合预期）：

describe("deleteMyItem", () => {
  let store = {};
  let getItemSpy;
  let setItemSpy;
  let removeItemSpy;

  beforeEach(() => {
    getItemSpy = spyOn(window.localStorage, "getItem").and.callFake((key) => {
      return store[key] || null;
    });

    setItemSpy = spyOn(window.localStorage, "setItem").and.callFake(
      (key, value) => {
        store[key] = value.toString();
      }
    );

    removeItemSpy = spyOn(window.localStorage, "removeItem").and.callFake(
      (key) => {
        delete store[key];
      }
    );
  });

  afterEach(() => {
    store = {};
  });

  it("should delete myItem from local storage if it exists", () => {
    // Set the item
    window.localStorage.setItem("myItem", "12345");
    console.log(store);
    // Logs out { myItem: '12345' }

    deleteItem();

    // Expect removeItemSpy to have been called with 'myItem'
    expect(removeItemSpy).toHaveBeenCalledWith("myItem");

    // Expect fedID to have been deleted
    const item = window.localStorage.getItem("myItem");
    expect(item).toBeNull();
  });
});

测试 2（失败）：

describe("deletePrefixedItem", () => {
  let store;
  let getItemSpy;
  let setItemSpy;
  let removeItemSpy;

  beforeEach(() => {
    store = {}
    
    getItemSpy = spyOn(window.localStorage, "getItem").and.callFake((key) => {
      return store[key] || null;
    });

    setItemSpy = spyOn(window.localStorage, "setItem").and.callFake(
      (key, value) => { store[key] = value.toString();
    });

    removeItemSpy = spyOn(window.localStorage, "removeItem").and.callFake(
      (key) => {
        delete store[key];
      }
    );
  });

  afterEach(() => {
    store = {};
  });

  it("should delete a item from local storage if it exists", () => {
    // Set the item
    window.localStorage.setItem("myItem", "test");
    window.localStorage.setItem("myItem1234", "test");
    console.log(store);
    // Prints out { myItem: 'test', myItem1234: test }

    // Call deletePrefixedItem function
    deletePrefixedItem();

    expect(removeItemSpy).toHaveBeenCalledWith("myItem1234");

    const item = window.localStorage.getItem("myItem1234");
    expect(item).toBeNull();
  });
});

如何遍历

window.localStorage

并访问正在设置的键/值对？

Answer 1

记住 localStorage 是一个对象，所以使用 Object.entries 遍历它：

// Clear localStorage and then set 3 test entries
localStorage.clear();
['One','Two','Three'].forEach((x,i) => localStorage['key'+i] = x);

// Loop through localStorage entries
Object.entries(window.localStorage).forEach(([key,val]) => console.log(key,val));