localStorage :本地存储
// 1.语法
// 存数据:localStorage.setItem('属性名','属性值')
// 取数据:localStorage.getItem('属性名')
// 删数据:localStorage.removaItem('属性名')
// 清空数据:localStorage.clear()
// 2.注意点
// 3.1永久存储:数据存在硬盘中
// 3.2只能存储string类型数据,如果存储其他类型编译器会自动
// 转换string类型存储
<!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>
<button class="setItem">存数据</button>
<button class="getItem">取数据</button>
<button class="removeItem">删数据</button>
<button class="clear">清空数据</button>
<script>
// 存数据 ;localStorage.setItem('属性名','属性值')
document.querySelector('.setItem').onclick = function() {
localStorage.setItem('uname', '吴某凡')
localStorage.setItem('age', '31')
localStorage.setItem('gender', '男')
localStorage.setItem('hobby', 'playPlane')
}
// 取数据:localStorage.getItem('属性名')
document.querySelector('.getItem').onclick = function() {
let uname = localStorage.getItem('uname')
console.log(uname);
}
// 删数据:localStorage.removaItem('属性名')
document.querySelector('.removeItem').onclick = function() {
localStorage.removeItem('age')
}
// 清空数据:localStorage.clear()
document.querySelector('.clear').onclick = function() {
localStorage.clear()
}
</script>
</body>
</html>