Web 存储-CFANZ编程社区

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

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

普通存储

存储

localStorage.sitename="同学"

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

查找 localStorage.sitename

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

key、value存储

存储

localStorage.setItem(key,value);

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

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

查找 localStorage.getItem(key)

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

删除
a. 删除单个数据
localStorage.removeItem(key); 这个就是在多个key中，移除key对应的值，但是key也对应的不存在。
b. 删除所有数据
localStorage.clear();这个就是清除当前所有key对应的所有value。
根据存储的顺序查到对应的keylocalStorage.key(index);

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

session存储

sessionStorage 方法针对一个 session 进行数据存储。当用户关闭浏览器窗口后，数据会被删除。
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>