设置和修改array并push到localStorage创建嵌套数组

Question

我有一个函数，它在运行时从搜索字段中获取字符串，并将其存储到本地存储。由于我们希望存储来自最终用户的所有搜索字符串以记录它，因此我们需要从localstorage获取当前数据，并添加最新的搜索字符串。

下面是我的代码:

const setDatatoLocalStorag = (searchQuery: string) => {
let searchHistory = localStorage.getItem("searchHistory");
let searchQueryArr = [];
if (searchHistory) {
JSON.parse(searchHistory);
searchQueryArr.push(searchQuery, searchHistory);
} else {
searchQueryArr.push(searchQuery);
}
localStorage.setItem("searchHistory", JSON.stringify(searchQueryArr));
}

让我们假设我们运行这个函数两次，并使用searchQuery "one_answers";cat"。这是它在localstorage中的样子:

["cat","["dog"]"]

我相信localstorage将获得项目作为字符串"[myData]"，这将导致错误。如何妥善处理?

我已经尝试遵循如何在本地存储存储对象的数组?除非成功。

Answer 1

问题是您没有将JSON.parse(searchHistory);分配给变量。我认为你应该这样做:

var searchQueryArr = ['dog'];
localStorage.setItem("searchHistory", JSON.stringify(searchQueryArr));
var searchHistory = JSON.parse(localStorage.getItem("searchHistory") || '[]');
console.log(searchQueryArr, searchHistory);

注意我不能得到这个工作与内联编辑器，但我确实在一个真实的服务器上尝试它，它工作。

Answer 2

创建一个隐藏编码/反编码的setter/getter对。然后添加一个执行get和set操作的高级push操作…

// const pretend local storage, keys => strings
const myLocalStorage = {}
function mySetItem(key, value) {
// use the actual local storage setItem() here
myLocalStorage[key] = JSON.stringify(value);
}
function myGetItem(key) {
// use the actual local storage getItem() here
return JSON.parse(myLocalStorage[key]);
}
function myPush(key, value) {
let current = myGetItem(key);
current.push(value)
mySetItem(key, current) 
}
// test
const key = 'myKey'
mySetItem(key, []);
myPush(key, { message: 'hello' })
myPush(key, { message: 'dolly' })
console.log(myGetItem(key))