In the previous lesson, we saw how we can connect to adjacent file and then return that JSON as a JavaScript
object and use that object within our JavaScript code.
So there's also an option and a possibility that in some cases, the data that you return back from
your fetch request comes back as a string.
And within the console, we can see a clear difference between the JSON data and the string being output
into the console.
And this just outputs it as a regular string.
So in this case, you can't return back the value of data.
So if we output data, it just returns it back as a string.
So we can't say data lost.
That's not going to return back any property values because there's nothing associated with data loss
which is going to return undefined.
Whereas with Jason Method, where it turns into a JavaScript object, we can use data and return back
the various property values, then return back to the values that are associated with the properties.
So in some cases, it is important to be able to turn it back and take a string and pass it into JSON.
So essentially what that's what the JSON method in fetch is doing.
That's parsing the string value and returning it back as JavaScript object.
There's a definition at the Mozilla Developer Network where JSON pass method passes the JSON string
constructing a JavaScript value and an object described by that string.
So they've got an example here.
And let's also take that data that's being returned back from JSON.
And remember, in this case, this is going to be a string.
We want to output it back as an object.
So this is where we can use the JSON pass method.
And within the pass method, we can just as done over here, we can pass the results of JSON and assign
it to the data value.
So return back that data.
And now we're back to a usable object in JavaScript.
There's also cases where you might want to turn it into a string.
And if you're restoring it to local storage and a few other resources where they've only got the one
site slot and they're expecting a string value, if you want to take the string value or you JSON value
and turn it into a string, you can do the opposite of the parts we're using.
JSON String Afie is going to turn it back into a string value.
So taking the data, turning it into a string and if we do a console log of the string, we see that
now it's once again within a string format.
So that means that we can't separate it out.
We still have the data value here.
We haven't reassigned data to a new value.
It's just been reassigned.
It's been a sign that the JSON string of high value has been assigned to data.
And I'll give you a quick example of how we can use this JSON object and store it into local storage
and we're going to store it as a string value into the local storage.
So right now we're putting it into the console.
Let's commentate both of these.
We're returning it back as text value and then we're parsing it into JSON to usable object.
So let's keep that and then we're turning it back into a string.
So once we do retrieve the data back, we can use the local storage and set an item into the local storage.
And what local storage does is this allows us to store property value into the storage of the document
origin.
So basically it's similar to the session storage, except that the data stored in local storage has
no expiration time and also the data stored in local storage.
So this is relevant to the browser.
So set item and it expects to properties and these are going to be string values that it's expecting.
So one of them is going to be the property name.
So this is going to be whatever the property name is.
And then on the other side, it's expecting a value of the value that's being stored.
And in this case, we've got the string of version of the JavaScript JSON object.
So now we've set the item into local storage and we can also go to retrieve the item from the local
storage.
So when we load the page, we don't necessarily need to make another request to Jason if we already
have it existing.
So let's set up a condition to check to see if there is a value for this.
And if there is within the local storage, then we can return back and.
Assign the value otherwise we can make the request to the function to fetch the data.
And either way, we're going to output the data into the console in the and so going into the function.
And get the local data.
And using the local storage method and to get item and the item that we're getting is going to be referenced
under temp.
So it's going to return that value back.
And let's log into the local storage, the data value, so that's going to put it as a string and because
it is expecting a string parameter, we want to make it back to a usable object.
Then this is where we can use the JSON pass and pass that data into a usable object.
So let me do a quick update on this and the first time that we run it.
It's going to return back now so we can have a condition to check to see if local data.
Doesn't exist, and if it doesn't exist, then that's what we're going to make the request to my Jason.
And if it does exist, then we're going to output the contents of the local data.
And I'll just move that console message into that function so it does exist, so we're just out putting
it into the local data so it doesn't matter how many times we run it, it's always going to exist if
we go for temp to and update us to attempt to the first time we refresh it, it's not going to exist.
And then the second time it is going to exist, so it's just going to output the console message, so
right here, it had to make the request to return that data.
And now that we've got it within a string value, we want to turn it back into a usable data object.
And this is where we can set a value for data.
And this is just the global data value and using JSON.
Pass, let's pass the value of the local data
and we'll console log data.
So now it's coming from the local storage, this value here is coming from the local storage and it
initially came from the JSON file.
So if we make an update to the JSON file, we're still getting it from the local storage.
If we update the value for the local storage, it's going to make the request to the local storage with
the property of temp three.
And it's going to first time it's going to save it into the local storage.
And we should also have a message here within the console.
To local.
So just have a console message there that's safe to the local storage and then the second time it's
accessing that data from the local storage that was initially placed there with the Thach request,
and it's outputting that.
So it's taking it back as a string value and then it's parsing it and turning it into a usable JavaScript
object.
And that's one of the uses that you can use that Jason Parsons, Jason Stringer by in order to turn
it into a string and then also turn it into a usable JavaScript object.
The challenge for this lesson is to get the facts content as text, to just update the method to text
instead of JSON, use JSON pass method and JavaScript to turn the string object into a usable JavaScript
object and then use the local storage to save the string version of the.
JavaScript object, and then lastly, use the parse and the string of Afie in order to store and retrieve
it from local storage.