[英]Can't see localStorage key val pairs in Chrome Dev Tools
I have a json file that stores data which is displayed on my page using javascript. This json file and its key val pairs are not visible or accessible in Chrome's Dev Tools.我有一个 json 文件,它存储使用 javascript 在我的页面上显示的数据。这个 json 文件及其密钥 val 对在 Chrome 的开发工具中不可见或不可访问。 This component manages json files:
该组件管理 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);
This is the database component:这是数据库组件:
// 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}`);
Values are stored using this function:使用此 function 存储值:
const updateDb =
({ passage, question }) =>
(answer) =>
writeSingleEntry({ date: new Date(), answer, passage, question });
Storage is handled by its own script:存储由它自己的脚本处理:
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);
It is called in several components.它在多个组件中被调用。 Here to write and read the value of a text passage:
这里写入和读取文本段落的值:
onActiveChanged(active) {
this.passage = readValue('passage-input');
}
onKeyup(event) {
writeValue('passage-input', event.target.value);
}
Here to write and record a question:这里写记录一个问题:
onActiveChanged(active) {
this.question = readValue("question-input");
this.passage = readValue("passage-input");
}
onKeyup(event) {
writeValue("question-input", event.target.value);
}
Here to provide an answer and reset the form:这里提供一个答案并重置表格:
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', '');
}
Here to get entries:在这里获取条目:
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);
}
Here to download and upload the JSON file:这里下载和上传JSON文件:
async exportBackup() {
downloadJson(`backup ${new Date()}.json`, await getAllEntries());
}
async importBackup({ target: { files } }) {
return readFileListAsJson(files)
.then(map(writeMultipleEntries));
}
Unlike this question , nothing is showing in Storage > Local Storage, and it is not a Chrome UI design flaw issue. 与这个问题不同,存储 > 本地存储中没有显示任何内容,这不是 Chrome UI 设计缺陷问题。
It is possible to confirm the values have been written and are are accessible from the json file using functions like:可以使用以下函数确认值已写入并且可以从 json 文件访问:
console.log(this.entries[0].date)
console.log(this.entries[0].answer)
but I would like to be able to debug by viewing the entire json file.但我希望能够通过查看整个 json 文件进行调试。
I had the same problem today while working on my webapp:今天在我的网络应用程序上工作时遇到了同样的问题:
JSON.parse(localStorage["my-storage-key"]
)JSON.parse(localStorage["my-storage-key"]
)https://localhost:4200
entry was totaly empty, just like in the screen capture you provided.https://localhost:4200
条目完全是空的,就像您提供的屏幕截图一样。 What fixed the problem for me was to click "Restore defaults and reload" in the preferences of the chrome DevTools, and i could see the entries in the table again.解决问题的方法是在 chrome DevTools 的首选项中单击“恢复默认值并重新加载”,我可以再次看到表中的条目。
It doesn't appear as though you have loaded the JSON file into local storage at any point.似乎您在任何时候都没有将 JSON 文件加载到本地存储中。 Perhaps there is driver code which you can share so that your issue can be more easily debugged.
也许有您可以共享的驱动程序代码,以便您的问题可以更容易地调试。
In the meantime, checkout the documentation for localstorage on mdn .同时,在mdn 上查看 localstorage的文档。 I think you may find the answer by reading up on how to set local storage.
我想你可以通过阅读如何设置本地存储找到答案。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.