localStorage

  • MDN文件

语法:

储存

localStorage.setItem("myCat", "Tom");

提取

var cat = localStorage.getItem("myCat");

提取

var cat = localStorage.getItem("myCat");

删除

localStorage.removeItem("myCat");

全部资料删除

localStorage.clear();

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Day28</title>
</head>
<body>
<h2 class="textContent"></h2>

<button class="SaveBtn">储存</button>
<button class="DeleteBtn">删除</button>

<script>
const SaveBtn = document.querySelector(".SaveBtn");
console.log(SaveBtn);
const DeleteBtn = document.querySelector(".DeleteBtn");
console.log(DeleteBtn);
const textContent = document.querySelector(".textContent");
console.log(textContent);

SaveBtn.addEventListener("click", () => { // 储存
console.log("有触发");
localStorage.setItem("text", "我被储存");
const cat = localStorage.getItem("text");
textContent.innerHTML = cat;
});

DeleteBtn.addEventListener("click", () => { // 移除显示
console.log("有触发");
localStorage.removeItem("text");

textContent.innerHTML = "";
});
</script>
</body>
</html>