- [Instructor] In the last lesson,
we defined the adapter pattern
and we looked at a case in JavaScript
where an adapter might be helpful.
Here we have some code inside of the index.js file
inside of our exercise files under chapter three
lesson two within the start folder
that uses the local storage API.
This API is only available in the browser,
and it's not available in node JS.
But we can use this exact same code
if we create an adapter for this API.
So what we're going to do is require a new file
that will create called localStorage.
And what we want to do with our local storage file
is create the exact same interface
that the browser API has for local storage.
So let's go ahead and create a brand new file.
And within our local storage file,
we're going to create a class called localStorage.
We're going to make sure we export
a new instance of localStorage.
So what we need to do in this class
is we need to provide the same interface
that we have in the browser local storage.
Or at least the same interface
that we're using within this file.
So that includes a length getter,
a get item method, a set item method, and a clear method.
So we will have get length, get item, and getItem
we will have the key of the item that we are going to get.
SetItem, set item we will have a key and a value
for the item that we want to set and clear.
So we have the same interface
inside of our local storage object.
Now the reason it's an adapter is because
we need to adapt this interface to a local environment.
Instead of saving the data
within the local storage API of the browser,
we're actually just going to save this data
to a JSON document.
So the first thing that I'm going to do
is I'm going to import some variables from the file system.
So we're going to be creating a new JSON file.
We want to import the writeFile.
We're also going to import existsSync
and readFileSync and unlink,
and these are all the methods that we're going to need
from the file system in order
to create our local storage JSON file
and save it, read from it, and remove it.
So now let's go ahead and make our adapter work.
Let's make our adapter save and read data
from a local JSON file.
So I'm going to go ahead and add a constructor.
And what we want to do is we want to have
this.items equal an object.
So our local storage class
will actually save all of the items locally in memory
under this.items.
That means whenever we want to retrieve an item,
we can simply return this.items,
and we'll get the key.
So that will return the value for any item
that we have saved under the current key.
If we want to get the number of items that we have
we can simply return a call to object.keys this.items.
Now object keys will give me an array
of all of the keys that we have saved
under this.items.
So I will just go ahead and return a length of that
and that will give me the number of items that I have saved
inside of this local storage object.
Now the other thing that we want to do
is we want to set the item.
So setting the item is going to consist
of setting the item locally.
So we'll take this.items and we'll set its key
equal to the value that's sent to this function.
But we also want to make this data persist.
So we need to call writeFile.
And we're going to make it persist as localStorage.json,
and the data that we're going to write to this File
is JSON.stringify this.items.
So we'll take that value and turn it into a JSON string
and then write it to the file.
And then if we have any errors
I'll go ahead and handle them here.
So if there is an error I will go ahead
and just throw it to the console.
So now we're setting items by saving them
to a local storage, JSON file.
What we want to do is if that file exists,
load those items.
And we can do that synchronously within the constructor
because our local storage object
is only going to instantiated once
when our application loads.
So what I'm going to do is within the constructor
when we instantiate this object,
I'm going to go ahead and check to see
if we already have our file.
I can use the existsSync method of the file system
to check for localStorage.json.
So if we have a localStorage.json file
I'll go ahead and log to the console that we have it
and that we're loading data.
And what we're going to do is go ahead and load that data
from the file using the readFileSync method,
and we will read localStorage.json.
That will give us the text.
And then we will set this.items to JSON.pars,
the text that we're reading from the file.
And then otherwise if the file doesn't exist,
then this.items is just going to be an empty object.
Great, so if we have a localStorage.json file
when we create this object
we will load the data from that file.
The last thing that we want to do,
is if we invoke the clear method
is remove the JSON file.
So I can go ahead and do so by saying this.items
equals an empty object again.
That's clearing any keys that we have saved there.
So we can use the unlink method,
localStorage.json,
and once we're done with that we'll just go ahead
and write a message to the console,
localStorage file removed.
So what we've done here is we've
created an adapter for local storage.
It's an object that we can use in the node JS environment
that works just like the browser local storage API.
Let's go ahead and try it out.
So let's take a look at this file.
What's going to happen is,
the very first time we run this file,
we shouldn't have any items in local storage.
So the length of our local storage should be empty.
We should also have an undefined user ID.
On line nine when we check for the user ID,
if we don't find one that's when
we're actually going to save some data to our file.
Let's go out to the terminal and run this.
Node index.js,
and we can see that we have 0 items saved in local storage,
that a user ID is undefined,
so we're setting the user ID and token.
So we've just invoked lines 10, 11, and 12,
which if we look in our start folder,
you'll notice you now have a localStorage.json file.
When we called set item, we created a new file,
and in this file we wrote to it
a sample token and sample user ID.
So if I were to run this client code again,
we have local storage.
We'll have two items saved into it
and a user ID will be found.
Let's go ahead and take a look.
So now we loaded the items from local storage.
We had two items saved.
The user ID is 12345,
and because we have a user ID,
we're going to go ahead and clear the user ID
and remove the local storage file.
So that's our else block down here, lines 14, 15, and 16.
We'll also notice that we
no longer have a localStorage.json file
because we invoked localStorage.clear on line 16.
So this is how an adapter can be useful
to adapt an object to a different environment
or another object.