Setting and modifying array and pushing to localStorage creates nested array-CodePudding

I have a function that takes a string from a search field during runtime, and stores it to localstorage. Since we want to store all search strings from the end user to record it, we need to get the current data from localstorage, and add the latest search string.

Here is my code:

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));
}

Lets assume we run the function twice, with the searchQuery "dog" and "cat". This is how it will look like in localstorage:

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

I believe localstorage will get the item as string "[myData]" which will cause the error. How to properly handle this?

I have tried to follow How to store an array of objects in Local Storage? withous success.

CodePudding user response：

The problem is you aren't assigning JSON.parse(searchHistory); to a variable. I think what you want to do is this:

var searchQueryArr = ['dog'];

localStorage.setItem("searchHistory", JSON.stringify(searchQueryArr));

var searchHistory = JSON.parse(localStorage.getItem("searchHistory") || '[]');

console.log(searchQueryArr, searchHistory);

Note I wasn't able to get this to work with the inline editor, but I did try it on a real server and it worked.

CodePudding user response：

Make a setter/getter pair that hide the encoding/unencoding. Then add a higher-level push that does a get and a set...

// 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))