《前端》localStorage 和 sessionStorage-将数据存入（取出）缓存的方法-2020年10月6日

一、localStorage 和 sessionStorage用法

数据放入缓存

localStorage.setItem('user',values.username);

sessionStorage.setItem("key", "value");

缓存中取数据

localStorage.getItem('user');

document.getElementById("result").innerHTML = localStorage.getItem("lastname");

sessionStorage.getItem("key");

删除数据

localStorage.removeItem("key");

sessionStorage.removeItem("key");

得到某个索引的key：

window.localStorage.key(index);

window.sessionStorage.key(index);

删除所有数据：

localStorage.clear();

sessionStorage.clear();

二、localStorage 和 sessionStorage区别

localStorage 和 sessionStorage 属性允许在浏览器中存储 key/value 对的数据。

localStorage 用于长久保存整个网站的数据，保存的数据没有过期时间，直到手动去删除。

localStorage 属性是只读的。如果你只想将数据保存在当前会话中，可以使用 sessionStorage 属性，该数据对象临时保存同一窗口(或标签页)的数据，在关闭窗口或标签页之后将会删除这些数据。

案例：

localStorage

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<script>
function clickCounter() {if(typeof(Storage) !== "undefined") {if (localStorage.clickcount) {localStorage.clickcount = Number(localStorage.clickcount)+1;} else {localStorage.clickcount = 1;}document.getElementById("result").innerHTML = "你在按钮上已经点击了 " + localStorage.clickcount + " 次。";} else {document.getElementById("result").innerHTML = "Sorry, your browser does not support web storage...";}
}
</script>
</head>
<body>
<p><button onclick="clickCounter()" type="button">点我!</button></p>
<div id="result"></div>
<p>点击按钮查看数字会自动增加。</p>
<p>关闭浏览器，重新打开这个页面点击按钮，可以看到之前的数据是有保留的。</p>
</body>
</html>

sessionStorage

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<script>
function clickCounter() {if(typeof(Storage) !== "undefined") {if (sessionStorage.clickcount) {sessionStorage.clickcount = Number(sessionStorage.clickcount)+1;} else {sessionStorage.clickcount = 1;}document.getElementById("result").innerHTML = "你在按钮上已经点击了 " + sessionStorage.clickcount + " 次。";} else {document.getElementById("result").innerHTML = "Sorry, your browser does not support web storage...";}
}
</script>
</head>
<body>
<p><button onclick="clickCounter()" type="button">点我!</button></p>
<div id="result"></div>
<p>点击按钮查看数字变化。</p>
<p>关闭浏览器并重新打开，看看数值是否重置了。</p>
</body>
</html>

web前端之localStorage在缓存中对数组进行存储、获取、删除_爸爸去哪了2之熊猫三胞胎的博客-CSDN博客 https://blog.csdn.net/u014785563/article/details/76039211?utm_medium=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-1.add_param_isCf&depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-1.add_param_isCf