<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title> 本地储存 </title>
localStorage：
本地存储
顾名思义：可以把数据缓存在本地（本地就是浏览器的意思）
作用：长久保存一些数据，可以存在localStorage
特点：
1.只要自己不删，它就一直存在
2.每个域名都是独立保存数据，不同域名之间不能互相访问。
sessionStorage：
用法什么的都跟localStorage是一毛一样的！
唯一的区别在于：sessionStorage保存的数据关掉浏览器就自动删除
所以，把sessionStorage可以理解为是一个短命版的localStorage
作用：临时保存一些数据
方法：
setItem： 保存数据
getItem： 获取数据
removeItem： 删除一个数据
clear：清空所有
</head>
<body>
<input type="button" value="保存数据" id="ben1">
<input type="button" value="获取数据" id="ben2">
<input type="button" value="删除数据" id="ben3">
<input type="button" value="清空数据" id="ben4">
<script>
// 保存数据
document.getElementById('ben1').onclick = function(){
// 参数1：键
// 参数2：值，也就是要保存的数据
localStorage.setItem('name','张三');
localStorage.setItem('age','18');
}
// 获取数据
document.getElementById('ben2').onclick = function() {
// 通过键来获取
// 会把获取的值当返回值返回
// 如果没有这个键取到null
var a1 = localStorage.getItem('name');
var a2 = localStorage.getItem('age');
alert("姓名: " + a1 + " 年龄: " + a2);
}
// 删除数据
document.getElementById('ben3').onclick = function() {
// 通过键来删除
localStorage.removeItem('age');
}
// 清空数据
document.getElementById('ben4').onclick = function() {
localStorage.clear()
}
</script>
</body>
</html>
网友评论