本地存储特性:
1.数据存储在用户浏览器中
2.设置、读取方便、甚至页面刷新不丢失数据
3.容量大较大、sessionStorage约5M、localStorage约20M
4.只能存储字符串,可以将对象JSON.stringify()编码后存储
1.window.sesionStorage
1.1.生命周期为关闭浏览器窗口
1.2在同一个窗口下数据可以共享
1.3以键值对的形式存储使用
案例:
index.html代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="text">
<button class="set">存储数据</button>
<button class="get">获取数据</button>
<button class="remove">删除数据</button>
<button class="del">清空数据</button>
<script>
var inputs = document.querySelector('input')
var set =document.querySelector('.set')
var get =document.querySelector('.get')
var remove = document.querySelector('.remove')
var del = document.querySelector('.del')
set.addEventListener('click',function () {
// 点击之后,就可以把表单里面的值存储起来
var val = inputs.value;
sessionStorage.setItem('uname',val)
})
get.addEventListener('click',function () {
// 点击之后,就可以把表单里面的值获取起来
console.log(sessionStorage.getItem('uname'));
})
remove.addEventListener('click',function () {
// 点击之后,就可以把表单里面的值清除掉
sessionStorage.removeItem('uname')
})
del.addEventListener('click',function () {
// 点击之后,清除所有
sessionStorage.clear()
})
</script>
</body>
</html>
运行结果:
2.window.localStorage
2.1生命周期永久生效,除非手动删除否则关闭页面也会存在
2.2可以多窗口页面共享(同一浏览器也可以共享)
2.3以键值对的形式存储使用
index.html代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="text">
<button class="set">存储数据</button>
<button class="get">获取数据</button>
<button class="remove">删除数据</button>
<button class="del">清空数据</button>
<script>
var inputs = document.querySelector('input')
var set =document.querySelector('.set')
var get =document.querySelector('.get')
var remove = document.querySelector('.remove')
var del = document.querySelector('.del')
set.addEventListener('click',function () {
// 点击之后,就可以把表单里面的值存储起来
var val = inputs.value;
localStorage.setItem('username',val)
})
get.addEventListener('click',function () {
// 点击之后,就可以把表单里面的值获取起来
console.log(localStorage.getItem('username'));
})
remove.addEventListener('click',function () {
// 点击之后,就可以把表单里面的值清除掉
localStorage.removeItem('username')
})
del.addEventListener('click',function () {
// 点击之后,清除所有
localStorage.clear()
})
</script>
</body>
</html>
运行结果:
2.1记住用户名:
index.html代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="text" id="username"><input type="checkbox" id="remember">记住用户名
<script>
var username = document.querySelector('#username')
var remember = document.querySelector('#remember')
if (localStorage.getItem('uname')){
username.value = localStorage.getItem('uname')
remember.checked =true
}
// 当选框发生改变时
remember.addEventListener('change',function () {
if (this.checked){
localStorage.setItem('uname',username.value)
// username.value = localStorage.getItem('uname')
} else {
localStorage.removeItem('uname')
}
})
</script>
</body>
</html>
运行结果: