在 Chrome 开发工具中看不到 localStorage 键值对

Question

我有一个 json 文件，用于存储使用 javascript 在我的页面上显示的数据。此 json 文件及其键值对在 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}`);

使用此函数存储值：

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 的首选项中单击“恢复默认值并重新加载”，然后我可以再次看到表中的条目。