Setting and modifying array and pushing to localStorage creates nested array

Question

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.

`JSON.parse(searchHistory);` itself doesn’t do anything. You need to _use_ the result somewhere. — Sebastian Simon, Dec 28 '22 at 20:42
@NewReactBeginner What is? You push `searchHistory`, not `JSON.parse(searchHistory)`. Read the [documentation](//developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/JSON/parse). Why do you believe that `JSON.parse` somehow modifies the variable `searchHistory`? This isn’t possible in JavaScript. — Sebastian Simon, Dec 28 '22 at 20:51

Rick · Answer 1 · 2022-12-28T21:01:21.367

0

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.

edited Dec 28 '22 at 21:01

answered Dec 28 '22 at 20:53

Rick

1,710
8
17

1

Please [format your code](https://meta.stackexchange.com/a/22189). – Jesse Dec 28 '22 at 20:54

score 0 · Answer 2 · answered Dec 28 '22 at 21:04

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

Setting and modifying array and pushing to localStorage creates nested array

2 Answers2