总结
- local存储的数据会长期有效
- session存储的数据会随着标签页关闭而消失
- local存储在数据会在多个标签页中共享
- session存储的数据仅会在当前标签页中生效
- 打开新标签页时，原页面的session数据会复制给新页面，但从此之后两页面的session数据就不再有关联
验证localStorage的共享特性
- 创建两个文件01.html与02.html
- 在01.html中写以下代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<p></p>
<button>点我+1</button>
<script>
const button = document.querySelector("button");
button.addEventListener("click", function () {
let n = localStorage.getItem("n") || 0;
n++;
localStorage.setItem("n", n);
renderN();
});
renderN();
function renderN() {
let n = localStorage.getItem("n") || 0;
const p = document.querySelector("p");
p.innerText = n;
}
</script>
</body>
</html>
- 在02.html中写以下代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<p></p>
<button>重置n</button>
<script>
const button = document.querySelector("button");
const p = document.querySelector("p");
p.innerText = localStorage.getItem("n");
button.addEventListener("click", function () {
localStorage.setItem("n", 0);
p.innerText = 0;
});
</script>
</body>
</html>
- 打开01与02页面，点击01中的按钮使n的值变大，切换到02页面后点击重置n按钮，再切回到01页面，点击+1按钮时会发现n变为1了，说明02页面对localStorage中n的操作影响到了01页面
验证sessionStorage的独立特性，即不会多标签页贡献数据
- 创建03.html文件，并复制01.html的代码，然后将localStorage全部替换为sessionStorage，具体代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<p></p>
<button>点我+1</button>
<script>
const button = document.querySelector("button");
button.addEventListener("click", function () {
let n = sessionStorage.getItem("n") || 0;
n++;
sessionStorage.setItem("n", n);
renderN();
});
renderN();
function renderN() {
let n = sessionStorage.getItem("n") || 0;
const p = document.querySelector("p");
p.innerText = n;
}
</script>
</body>
</html>
- 点击按钮使n++，然后用浏览器的复制标签页功能再打开一个新的03.html标签页，新标签页中的n会与旧页面相同，但点击新旧页的n++按钮，会发现两边的n都各自变大且不会互相影响，这就是sessionStorage的一个特性
