html第7天，Web 存储

AI搬运工
89 阅读2分钟

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第7天，点击查看活动详情

大家好，今天给大家分享一下web下的存储，可能大家觉得奇怪，web这个怎么存储。没有介质什么的？其实，我们在第一篇文章的时候就说过，html靠浏览器来解析的，当然也是可以靠浏览器来存储一些内容。废话不说，看下面：

友情提示：学习下面知识，需要有javascript基础。

普通存储

  1. 存储

localStorage.sitename="同学"

这个就很简单了，localStorage.sitename=XX,后面这个不固定，XX写什么，咱们在浏览器存储什么。这个是非长久存储，清除缓存，这个数据就会被删除

  1. 查找 localStorage.sitename

直接使用如上这个方法，就能获取存储的值。

key、value存储

  1. 存储

localStorage.setItem(key,value);

这个存储是我们常见的存储方式，也是使用最多的存储方式，推荐使用。

使用key，value存储不会出现存储值覆盖的情况。

  1. 查找 localStorage.getItem(key)

可以直接通过某一个表示来直接查找，就像银行存储账户，知道卡号，就知道有多少钱。

  1. 删除

    a. 删除单个数据

    localStorage.removeItem(key);

    这个就是在多个key中，移除key对应的值，但是key也对应的不存在。

    b. 删除所有数据

    localStorage.clear();

    这个就是清除当前所有key对应的所有value。

  2. 根据存储的顺序查到对应的key localStorage.key(index);

我们在存储多个key之后，可能会忘记了key的名称，这个时候就可以根据key存储的顺序。来找到对应的key。

session存储

  1. sessionStorage 方法针对一个 session 进行数据存储。当用户关闭浏览器窗口后，数据会被删除。
  2. sessionStorage比localStorage更严苛一点，除了协议、主机名、端口外，还要求在同一窗口（也就是浏览器的标签页）下。

上面所有的方法，和存储的数据，都是缓存的数据，只要在浏览器中，清除缓存，就会清除数据。

看，如下例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Web 存储</title>
</head>
<body>
<div id="result1"></div>
 
<p><button onclick="clickCounter()" type="button">点我！</button></p>
<div id="result2"></div>
<p>点击该按钮查看计数器的增加。</p>
<p>关闭浏览器选项卡(或窗口),重新打开此页面,计数器将重置。</p>
 
<script>
if(typeof(Storage)!=="undefined")
{
  localStorage.sitename="同学";
  document.getElementById("result1").innerHTML="网站名：" + localStorage.sitename;
}
else
{
  document.getElementById("result1").innerHTML="对不起，您的浏览器不支持 web 存储。";
}
 
function clickCounter()
{
	if(typeof(Storage)!=="undefined")
	{
		if (sessionStorage.clickcount)
		{
			sessionStorage.clickcount=Number(sessionStorage.clickcount)+1;
		}
		else
		{
			sessionStorage.clickcount=1;
		}
		document.getElementById("result2").innerHTML="在这个会话中你已经点击了该按钮 " + sessionStorage.clickcount + " 次 ";
	}
	else
	{
		document.getElementById("result2").innerHTML="抱歉，您的浏览器不支持 web 存储";
	}
}
</script>
</body>
</html>
avatar
文章
阅读
粉丝