So far, we have learned basically to advance JavaScript with HTML and using all these knowledge we made a . If we look closely to that web app, we never added any storage mechanism to it, and because of it any task completed, removed or newly added can't be retained next time we again visit that web app. So what we can do it use a database or storage and in this article, we will learn about the local storage.

到目前为止，我们基本上已经学会了使用HTML改进JavaScript，并使用所有这些知识制作了一个 。 如果我们密切关注该Web应用程序，则不会向其添加任何存储机制，因此，下次下次再次访问该Web应用程序时，将无法保留已完成，删除或新添加的任何任务。 因此，我们可以使用数据库或存储来执行此操作，并且在本文中，我们将了解本地存储 。

To demonstrate the local storage we will build an HTML file index.html and another a JavaScript file localStorage.js.

为了演示本地存储，我们将构建一个HTML文件index.html和另一个JavaScript文件localStorage.js 。

Let's began with our index.html:

让我们从我们的index.html开始：

			
    		
    		
    						
Your reading this HTML on IncludeHelp
			

This simple HTML only used to link our JavaScript so nothing much to explain *wink*, but still, you are curious I recommend visit .

这个简单HTML仅用于链接我们JavaScript，因此没有太多解释* wink *的内容，但是您还是很好奇，我建议访问“ 。

Now before we dive into the local storage with JS, let's understand a bit, what local storage is, and where you can find it.

现在，在使用JS进入本地存储之前，让我们先了解一下什么是本地存储以及在哪里可以找到它。

At the time of writing this article, I used Google Chrome (in different browsers, it could be different) and in it, you can see local Storage under Applications and then local Storage.

在撰写本文时，我使用了谷歌浏览器(在不同的浏览器中，可能会有所不同)，在其中，您可以在“应用程序”下看到“本地存储”，然后看到“本地存储”。

Point to note here is that it stores the data only in form of Key and Value, that is for every value we store there is unique for it. We can retrieve any value using its key only.

这里要注意的是，它仅以键和值的形式存储数据，也就是说，对于我们存储的每个值，它都是唯一的。 我们只能使用其键检索任何值。

Now, let's see our localStorage.js:

现在，让我们看看我们的localStorage.js ：

localStorage.setItem('student', 'Ravi')localStorage.setItem('task','read an Article on IncludeHElp')localStorage.setItem('QnAforum','visit ask.includehelp.com for getting help with your programming queries')console.log(localStorage.getItem('student'))	//Output snap 1localStorage.setItem('student','Ravi Kumar')localStorage.removeItem('student')		//line 1console.log(localStorage.getItem('student'));localStorage.setItem('student','Ravi Kumar')localStorage.clear()		//line 2console.log(localStorage.getItem('student'));		//output snap 2

Output

输出量

Explanation:

说明：

In this JavaScript code, we added items into the local Storage using localStorage.setItem(key, value), this setItem() method accept two parameters one key and other its value both in String format.

在此JavaScript代码中，我们使用localStorage.setItem(key，value)将项目添加到本地存储中，此setItem()方法接受两个参数，一个是键 ，另一个是String格式的值 。

Now to retrieve those values from the local storage we will be using localStorage.getItem(key), for getItem() method we will only pass single key and it will retrieve values of that key again key will pass as a string.

现在，要从本地存储中检索这些值，我们将使用localStorage.getItem(key) ，对于getItem()方法，我们将仅传递单个键 ，它将再次检索该键的值，键将作为字符串传递。

In case we might need to update an existing key we just simply use setItem() method with the same key but with the updated value.

万一我们可能需要更新现有键，我们只需使用具有相同键但具有更新值的setItem()方法即可。

Again to remove any key-value pair we use localStorage.removeItem('key'), and it will remove that particular key-value pair. But if we wanted to clear the whole storage we shall use localStorage.clear(), without passing any parameter and it will clear everything in our local storage.

再次删除任何键值对，我们使用localStorage.removeItem('key') ，它将删除该特定键值对。 但是，如果我们想清除整个存储，我们将使用localStorage.clear() ，而不传递任何参数，它将清除本地存储中的所有内容。

As we have seen that to store any key-pair value inside a local storage as a string, as we can only use one key with a single value, then how can I store multiple values like if in above code I like to add some more students but student key is already used. So one way to tackle this is use object or array but again value needs to an array, for this we use JSON.

正如我们已经看到的那样，要将任何密钥对值存储在本地存储中作为字符串存储，因为我们只能将一个密钥与单个值一起使用，那么如何存储多个值，就像上面的代码中我想添加更多的值一样学生，但学生密钥已被使用。 因此，解决此问题的一种方法是使用对象或数组，但再次需要对数组使用值，为此，我们使用JSON。

翻译自: