Javascript教程
JavaScript基础
JavaScript Objects
JavaScript BOM
JavaScript DOM
JavaScript OOP
JavaScript Cookies
JavaScript事件
JavaScript异常
JavaScript常用

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的不同浏览器及其版本的列表。
 chrome浏览器  ie浏览器  firefox浏览器 Opera浏览器  Safari浏览器
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>
输出1
在以下输出中,您可以看到我们单击了 点击计数按钮9次。
 JavaScript localStorage
输出2
现在关闭窗口标签然后重新打开以再次运行代码。再次点击 点击计数按钮,它将从您离开的10点开始计数。
 JavaScript localStorage
输出3
现在,单击 清除计数按钮以清除存储的数据。再次单击 点击计数按钮时,它将再次从1开始。
 JavaScript localStorage

清除所有记录

localStorage的Clear()方法用于清除整个存储数据。调用此方法时,它将从存储中清除该域的所有记录。它不包含任何参数。请参阅语法以清除localStorage:
window.localStorage.clear();
localStorage.clear();
在下面的示例中,我们将使用此清晰的代码。

检查localStorage

在JavaScript控制台上,您可以通过键入以下内容检查本地存储空间 localStorage 命令。即使localStorage中没有任何内容,其内部长度也为0。
命令
LocalStorage
输出
存储{length:0}
昵称: 邮箱:
Copyright © 2022 立地货 All Rights Reserved.
备案号:京ICP备14037608号-4