JavaScript localStorage

LocalStorage 是网络存储的一种数据存储类型。这使JavaScript网站和应用程序可以存储和访问数据而没有任何到期日期。这意味着数据将始终保留并且不会过期。因此，即使关闭浏览器窗口后，浏览器中存储的数据仍然可用。

简而言之，我们只能说localStorage保留没有到期日期的数据，甚至用户也可以使用。关闭浏览器窗口后。可以通过多种方式使用，例如记住购物车数据或在任何网站上的用户登录。

在过去的日子里，cookies是记住此类临时和本地信息的唯一选择，但现在我们也有localStorage。本地存储具有比Cookie更高的存储限制(5MB和4MB)。它还不会随每个 HTTP请求发送。因此，对于客户端存储来说，这是一个更好的选择。需要注意localStorage的一些要点：

localStorage不安全地存储敏感数据，可以使用任何代码进行访问。因此，这是非常不安全的。
localStorage比cookie的优势在于，它可以存储比cookie更多的数据。您可以使用localStorage在浏览器上存储5MB数据。
localStorage仅将信息存储在浏览器中，而不是存储在数据库中。因此，localStorage不能替代基于服务器的数据库。
localStorage是同步的，这意味着每个操作都一个接一个地执行。

localStorage方法

localStorage提供了一些使用它的方法。我们将通过示例讨论所有这些localStorage方法。在此之前，这些方法的基本概述如下：

方法	说明
setItem()	此方法用于通过键和值将数据添加到localStorage。
getItem()	它用于使用密钥从存储中获取或检索值。
removeItem()	它使用密钥从存储中删除一个项目。
clear()	它用于清除所有存储空间。

这些方法中的每一个都与localStorage关键字一起使用，该关键字与点(。)字符连接。
例如：：localStorage.setItem()。

给出一些代码，这些代码用于添加，检索，删除和清除localStorage中的数据。必要时在代码中相应地使用它们。您需要一个键值对才能在localStorage中添加一些数据。因此，让key为city，其值为Noida，即
即 key：value = city：Noida。

添加数据

要在localStorage中添加数据，必须将key和value都传入setItem()函数。

 localStorage.setItem("city", "Noida");

检索数据

它仅需要密钥即可从存储中检索数据，还需要JavaScript变量，用于存储返回的数据。

 const res = localStorage.getItem("city");

删除数据

它还只需要键即可删除其附带的值。

 localStorage.removeItem("city");

清除localStorage

这是localStorage的简单clear()函数，用于删除所有localStorage数据：

 localStorage.clear()

localStorage的限制

由于localStorage允许存储临时的本地数据，即使关闭浏览器窗口后该数据仍然保留，但它也没有什么限制。下面给出了localStorage的一些限制：

请勿在本地存储中存储敏感信息，例如用户名和密码。
localStorage没有数据保护，可以使用任何代码进行访问。因此，这是非常不安全的。
使用localStorage最多只能在浏览器中存储5MB数据。
localStorage仅将信息存储在浏览器中，而不存储在基于服务器的数据库中。
localStorage是同步的，这意味着每个操作都一个接一个地执行。

localStorage的优势

localStorage具有许多优点。 localStorage的首要优势是，它可以在浏览器中存储临时但有用的数据，即使关闭浏览器窗口后，这些数据仍会保留。下面列出了一些优点：

localStorage收集的数据存储在浏览器中。您可以在浏览器中存储5 MB数据。
localStorage没有存储数据的到期日期。
您可以通过单个行代码(即 clear())删除所有localStorage项。
即使关闭浏览器窗口后，localStorage数据仍然存在，例如购物车中的物品。
与cookie相比，它还具有优势，因为它可以存储比cookie多的数据。

浏览器兼容性

localStorage已在HTML 5中指定，Chrome等多种浏览器都支持localStorage。以下是支持JavaScript localStorage的不同浏览器及其版本的列表。


4.0	8.0	3.5	11.5	4

用于检查浏览器兼容性的JavaScript代码

借助以下代码示例，您可以检查浏览器的兼容性。在每个localStorage程序中使用此代码检查浏览器的兼容性，然后再从localStorage中添加或删除某些内容。

 <script>
 // Code to check browser support 
 if (typeof(Storage) !== "undefined") {
    //browser support localStorage 
 } else {
   //browser does not support localStorage
 }
 </script>

输出

undefined

示例

这是向本地存储添加键和值并通过键取回的基本示例。请参见下面的代码，localStorage方法如何工作：

 <html>
 <body>
 <div id="result"></div>
 <script>
 // Check browser support
 if (typeof(Storage) !== "undefined") {
   // Store an item to localStorage
   localStorage.setItem("firstname", "Alen");
   // Retrieve the added item
   document.getElementById("result").innerHTML = localStorage.getItem("firstname");
 } else {
   //display this message if browser does not support localStorage
   document.getElementById("result").innerHTML = "Sorry, your browser does not support Web Storage.";
 }
 </script>
 </body>
 </html>

输出

Alen

更多示例

这是计算按钮点击次数的示例，这意味着它将计算用户单击按钮的次数。在此示例中，我们将创建两个按钮，一个按钮用于计算用户点击次数，另一个按钮用于清除点击数据。

 <html>
 <head>
 <script>
 //function to count the button clicks
 function clickCounting() {
   if(typeof(Storage) !== "undefined") {
     if (localStorage.clickcount) {
       localStorage.clickcount = Number(localStorage.clickcount)+1;
     } else {
       localStorage.clickcount = 1;
     }
     document.getElementById("result").innerHTML = "You have clicked the button " + localStorage.clickcount + " time(s).";
   }
     //when the browser does not support
   else {
     document.getElementById("result").innerHTML = "Your browser does not support web storage.";
   }
 }
 //function to clear the data stored by browser
 function clearCounting() {
     window.localStorage.clear();
 }
 </script>
 </head>
 <body>
 <h3> Click the button to see the counter increase.</h3>
 <p> <button onclick="clickCounting()" type="button">Click to Count</button></p>
 <div id="result"> </div>
 <h4> Now close the browser tab or browser window and execute the code again on the browser. <h4>
 <h3>Note: The counter will start counting from where you leave and is not reset.</h3>
 <p> <button onclick="clearCounting()" type="button">Clear Count</button></p>
 </body>
 </html>