在 Chrome 開發工具中看不到 localStorage 鍵值對

Question

我有一個 json 文件，它存儲使用 javascript 在我的頁面上顯示的數據。這個 json 文件及其密鑰 val 對在 Chrome 的開發工具中不可見或不可訪問。 該組件管理 json 個文件：

/**
 * Takes a filename and a JS object and initiates a download through the browser
 * @param {String} filename
 * @param {any} object JSON serializable object
 * @return {undefined}
 */
export const downloadJson = (filename, object) => {
  const content = JSON.stringify(object, null, 2);
  const el = document.createElement('a');
  el.setAttribute('href', `data:application/json;charset=utf-8,${encodeURIComponent(content)}`);
  el.setAttribute('download', filename);
  el.hidden = true;
  document.body.appendChild(el);
  el.click();
  document.body.removeChild(el);
};

/**
 * Gets the `target.result` property from an event, or returns null
 * if it fails at any point
 * @type {Function}
 * @param {Event} event load Event
 * @return {File}
 */
const getFileResult = propPathOr(null, ['target', 'result']);

/**
 * Takes a file and reads it as JSON, resolving the JSON-parsed
 * file contents
 * @param {File} file
 * @return {Promise<[Object]>} Returns Promise of Array of Archive Entries
 */
export const readFileAsJson = file => {
  const reader = new FileReader();
  const promise = new Promise((resolve, reject) => {
    reader.onload = compose(resolve, JSON.parse, getFileResult);
    reader.onerror = reject;
  });
  reader.readAsText(file);
  return promise;
};

export const readFileListAsJson = files =>
  Promise.all(
    Array.from(files)
      .map(readFileAsJson)
  )
    .catch(console.error);

這是數據庫組件：

// DATABASE functions
import { get, set, keys } from 'idb-keyval';
import { sha1 } from './hash.js';

const getKey = key => get(key);

export const getAllEntries = async () =>
  await Promise.all((await keys()).map(getKey));

export const writeMultipleEntries = entries =>
  entries.forEach(writeSingleEntry);

/**
 * @typedef {Object} ArchiveEntry
 * @property {String} date
 * @property {String} passage
 * @property {String} question
 * @property {String} answer
 */

/**
 * Writes a single archive entry to idb
 * @param {ArchiveEntry} entry
 * @return {ArchiveEntry}
 */
export const writeSingleEntry = async ({ date, passage, question, answer }) => {
  const hash = await hashEntry({ date, passage, question });
  await set(hash, { date, passage, question, answer });
  return { date, passage, question, answer };
};

/**
 * Generates a hash of an entry to use as it's idb key
 * @param {ArchiveEntry} entry
 * @return {string}
 */
const hashEntry = ({ date, passage, question }) =>
  sha1(`${date}-${passage}-${question}`);

使用此 function 存儲值：

const updateDb =
  ({ passage, question }) =>
  (answer) =>
    writeSingleEntry({ date: new Date(), answer, passage, question });

存儲由它自己的腳本處理：

export const storeOnInput = key => ({ target: { value } }) => writeValue(key, value);
export const readValue = key => localStorage.getItem(key);
export const writeValue = (key, val) => localStorage.setItem(key, val);

它在多個組件中被調用。 這里寫入和讀取文本段落的值：

onActiveChanged(active) {
  this.passage = readValue('passage-input');
}   

onKeyup(event) {
    writeValue('passage-input', event.target.value);
}

這里寫記錄一個問題：

onActiveChanged(active) {
  this.question = readValue("question-input");
  this.passage = readValue("passage-input");
}

onKeyup(event) {
   writeValue("question-input", event.target.value);
}

這里提供一個答案並重置表格：

const answer = document.getElementById('answer');
const write = document.getElementById('write');
const question = document.getElementById('question');

const onAnswerSubmitted = ({ detail: answer }) => {
  writeValue('answer', answer);
};

onActiveChanged(active) {
  if (!active) return;
  this.answer = readValue('answer');
}

resetQuestion() {
  this.dispatchEvent(new CustomEvent('reset-question'));
  writeValue('question-input', '');
  writeValue('answer', '');
}

resetWrite() {
  this.resetQuestion();
  this.dispatchEvent(new CustomEvent('reset-passage'));
  writeValue('passage-input', '');
}

在這里獲取條目：

  onActiveChanged(active) {
    if (active) this.getEntries();
  }

 async getEntries() {
    this.entries = await getAllEntries();
    this.entry = new URLSearchParams(location.search.substring(1)).get("date");
    console.log("here are the dates: \n", prettyDate(this.entries[0].date));
    console.log("here is an answer: \n", this.entries[0].answer);
  }

這里下載和上傳JSON文件：

  async exportBackup() {
    downloadJson(`backup ${new Date()}.json`, await getAllEntries());
  }

  async importBackup({ target: { files } }) {
    return readFileListAsJson(files)
      .then(map(writeMultipleEntries));
  }

與這個問題不同，存儲 > 本地存儲中沒有顯示任何內容，這不是 Chrome UI 設計缺陷問題。

可以使用以下函數確認值已寫入並且可以從 json 文件訪問：

console.log(this.entries[0].date)
console.log(this.entries[0].answer)

但我希望能夠通過查看整個 json 文件進行調試。

Answer 1

今天在我的網絡應用程序上工作時遇到了同樣的問題：

• 我可以通過控制台訪問我在本地存儲上注冊的一些數據（ JSON.parse(localStorage["my-storage-key"] ）
• 但是在 Chrome 開發工具的應用程序選項卡中， https://localhost:4200條目完全是空的，就像您提供的屏幕截圖一樣。

解決問題的方法是在 chrome DevTools 的首選項中單擊“恢復默認值並重新加載”，我可以再次看到表中的條目。

Answer 2

似乎您在任何時候都沒有將 JSON 文件加載到本地存儲中。 也許有您可以共享的驅動程序代碼，以便您的問題可以更容易地調試。

同時，在mdn 上查看 localstorage的文檔。 我想你可以通過閱讀如何設置本地存儲找到答案。