Javascript - 如何防止 localStorage 将数据存储为字符串？

Question

I'm currently using a set of data that is an array of objects. In order to try and speed up load times, I'm trying to use localStorage to store the data and access it quickly. The big problem is that the data isn't being stored as an array of objects but rather as a string. The data itself looks something like this.

[{id: 1, name: "BP", industry: "oil and gas", indicator: "Board Oversight"}, 
{id: 2, name: "Shell", industry: "oil and gas", indicator: "Board Oversight"}]

This entire array is being stored in a variable called dataSet and I attempted to store it into local storage like so.

localStorage.setItem('finalDataset', dataSet)

When I try to get the item, the data stored inside looks correct but the data is a string as opposed to what I actually want. So how can I store this data inside of localStorage in the exact same format?

I also attempted to do localStorage.setItem('finalDataset', JSON.stringify(dataSet)) and that also returned a string.

Answer 1

Javascript - How to prevent localStorage from storing data as a string?

You can't, that's what it does.

What you can do is use a string-friendly serialization format, like JSON.

To retrieve:

const data = JSON.parse(localStorage.getItem("name") || "null");

That retrieves and deserializes the data. You get null if there wasn't anything stored for that key. (Technically, you don't even need the || "null" part of that, since localStorage.getItem("name") returns null and JSON.parse coerces its argument to a string, but...I like to include it anyway, for...clarity?)

To store:

localStorage.setItem("name", JSON.stringify(data));

Answer 2

The answer is simple: You cannot store it as a different type than a string value.

Extract from the API:

The keys and the values are always in the UTF-16 DOMString format, which uses two bytes per character. As with objects, integer keys are automatically converted to strings.

Source: https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage

Answer 3

You can't... The data is always saved as a string.

https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage

"The keys and the values are always in the UTF-16 DOMString format, which uses two bytes per character. As with objects, integer keys are automatically converted to strings."

The trick is to use JSON.stringify when saving and JSON.parse when retreiving the data.