Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to store and retrieve JSON data into local storage?

I have this code:

var string = '{"items":[{"Desc":"Item1"},{"Desc":"Item2"}]}';
localStorage.setItem('added-items', JSON.stringify(string));

This code will use localStorage.

Here is now the code to get the stored data:

var retrievedObject = localStorage.getItem('added-items');

My problem now is, how can i get the size of the data items? answer must be 2.

How can i get the "Item1" and "Item2"?

I tried retrievedObject[0][0] but it is not working.

And how to add data on it? so it will be

{"items":[{"Desc":"Item1"},{"Desc":"Item2"},{"Desc":"Item3"}]}

Can I use JSON.stringify?

like image 443
JMA Avatar asked Dec 28 '15 12:12

JMA


People also ask

Can we store JSON in localStorage?

Storing JSON, Functions And Arrays in localStorage Luckily, we can store complex data in localStorage by leveraging the JSON object's stringify() and parse() functions. JSON support is quite good on mobile but if you need to add support use json2.

How do you store JSON data?

JSON and BSON data can be stored in columns, as long as the column data type being used is supported by the table. Supported column data types include: BLOB (row-organized tables only) CHAR (row and column organized tables)

How do I save JSON to local text file?

To save JSON to local text file with JavaScript. we can create a blob from the text. const a = document. createElement("a"); const file = new Blob([content], { type: "text/plain" }); a.


2 Answers

To bring clarity to future people that may stumble across this question and found the accepted answer to not be everything you hoped and dreamed for:

I've extended the question so that the user may either want to input a string or JSON into localStorage.

Included are two functions, AddToLocalStorage(data) and GetFromLocalStorage(key).

With AddToLocalStorage(data), if your input is not a string (such as JSON), then it will be converted into one.

GetFromLocalStorage(key) retrieves the data from localStorage of said key

The end of the script shows an example of how to examine and alter the data within JSON. Because it is a combination of objects and array, one must use a combination of . and [] where they are applicable.

var string = '{"items":[{"Desc":"Item1"},{"Desc":"Item2"}]}';
var json = {"items":[{"Desc":"Item1"},{"Desc":"Item2"},{"firstName":"John"},{"lastName":"Smith"}]};

localStorage.setItem('added-items', AddToLocalStorage(string));
localStorage.setItem('added-items', AddToLocalStorage(json));

// this function converts JSON into string to be entered into localStorage
function AddToLocalStorage(data) {
  if (typeof data != "string") {data = JSON.stringify(data);}
  return data;
}

// this function gets string from localStorage and converts it into JSON
function GetFromLocalStorage(key) {
  return JSON.parse(localStorage.getItem(key));
}

var myData = GetFromLocalStorage("added-items");

console.log(myData.items[2].firstName)    // "John"

myData.items[2].firstName = ["John","Elizabeth"];
myData.items[2].lastName = ["Smith","Howard"];

console.log(myData.items[2])    // {"firstName":["John","Elizabeth"],"lastName":["Smith","Howard"]}

console.log(myData.items.length)    // 4
like image 173
zack Avatar answered Oct 16 '22 01:10

zack


var string = '{"items":[{"Desc":"Item1"},{"Desc":"Item2"}]}';
localStorage.setItem('added-items', JSON.stringify(string));

stringify means, take an object and return its presentation as a string. What you have, is already a string and not a JSON object.

The opposite is JSON.parse which takes a string and turns it into an object.

Neither of them have anything to do with getting the size of an array. When properly coding JavaScript you almost never use JSON.parse or JSON.stringify. Only if serialization is explicitly wanted.

Use length for the size of the array:

var obj = {"items":[{"Desc":"Item1"},{"Desc":"Item2"},{"Desc":"Item3"}]}
console.debug(obj.items.length);
like image 35
Daniel W. Avatar answered Oct 15 '22 23:10

Daniel W.