Shulou(Shulou.com)06/01 Report--

Editor to share with you how to use local storage and session storage in JavaScript, I believe most people do not know much about it, so share this article for your reference, I hope you can learn a lot after reading this article, let's go to know it!

Premise knowledge

Please follow my steps below:

1. Press F12 in any web page to open the developer tool

2. Click Application to apply

Click Storage, where you will see local storage and session storage.

Both local storage and session storage store key-value pairs.

The main difference between local storage and session storage is that the key-value pairs stored in the session store are lost after the browser is closed.

Example

Now, let's use some examples to see how to operate on local storage.

Example 1: provide key-value pairs to local storage localStorage.setItem ('Name1',' uiu')

Console execution, view the effect

Let's take a look at the "typeof" stored locally:

Example 2: set key-value pairs in local storage

In the above example, we saw how to set key-value pairs in the local store.

Now, let's learn how to get key-value pairs from local storage.

Let Name1 = localStorage.getItem ('Name1') console.log (Name1)

Example 3: get a null value

Now, let's try to get some values that don't exist.

Let Name2 = localStorage.getItem ('Name2'); console.log (Name2)

If you try to get something from a local store that does not exist, the result is null.

Many times we want to store arrays in local storage because arrays are easy to use (we have a lot of built-in array methods).

However, one limitation of local storage is that it stores the array as a string. Let's see what I mean:

/ / Local storage localStorage.setItem ('WebSite',' uiuing.com'); / define ProgrammingLanguage array let ProgrammingLanguage = ['Java',' Python', 'JavaScript',' GO+'] / / local storage ProgrammingLanguage array localStorage.setItem ('favoriteProgrammingLanguage', ProgrammingLanguage)

To overcome this problem, ☝️, we use JSON.stringify. Take a look at the actual operation below

Example 4: storing arrays in local storage

Now we use JSON.stringify to store the array in local storage

LocalStorage.setItem ('WebSite',' uiuing.com'); let ProgrammingLanguage = ['Java',' Python', 'JavaScript',' GO+'] / / here the original ProgrammingLanguage is modified to JSON.stringify (ProgrammingLanguage) localStorage.setItem ('favoriteProgrammingLanguage',JSON.stringify (ProgrammingLanguage))

Example 5: get an array from local storage

Gets an array from the local store.

The above result may look like an array, but we get the string from the local storage instead of the array.

Let me prove it.

So, to get the array from the local storage, we use JSON.parse, as shown below.

Example 6: get an array from local storage?

Now we use JSON.parse to get an array from the local store

Console.log (JSON.parse (localStorage.getItem ('favoriteProgrammingLanguage')

Therefore, we use:

JSON.stringify: sets the array to the value in the local store. JSON.parse: gets an array from the local store.

Example 7: clear local storage

Before cleaning

LocalStorage.clear ()

After operation

Therefore, we can use localStorage.clear () to clear the local storage

Delete only the "name1" key-value pair from the local store.

Example 8: delete only the Name1 key value pair localStorage.setItem ('Name1',' uiu'); localStorage.setItem ('WebSite',' uiuing.com'); let ProgrammingLanguage = ['Java',' Python', 'JavaScript',' GO+'] localStorage.setItem ('favoriteProgrammingLanguage',JSON.stringify (ProgrammingLanguage)) from the local store

Try running this command.

LocalStorage.removeItem ('Name1')

As you can see above, to delete the specific key-value pair we use, localStorage.removeItem.

Session storage

This is all about local storage.

We run a similar operation in the session store, except that we use sessionStorage instead of localStorage:

/ / sample 1sessionStorage.setItem ('Name1',' uiu'); / / sample 2sessionStorage.getItem ('Name1'); / / sample 4let ProgrammingLanguage = [' Java', 'Python',' JavaScript', 'GO+'] sessionStorage.setItem (' favoriteProgrammingLanguage',JSON.stringify (ProgrammingLanguage)); / / sample 6console.log (JSON.parse (sessionStorage.getItem ('favoriteProgrammingLanguage'); / / sample 7sessionStorage.clear () / / sample 8sessionStorage.removeItem (' Name1')

Let's run it.

SessionStorage.setItem ('Name1',' uiu')

Next, we close the page and reopen it.

At this point, the data stored by the session has disappeared, while the data previously run by the example still exists in the local store.

These are all the contents of the article "how to use Local Storage and session Storage in JavaScript". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.