本地存储的特性
1、数据是存储在用户的浏览器中。
2、设置、读取方便，甚至页面刷新或关闭都不会丢失数据。
3、容量较大，sessionStorage 约 5M、localStorage 约 20M。
4、只能存储字符串，可以将对象 JSON.stringify() 编码后存储。
window.sessionStorage
1、生命周期为关闭浏览器窗口。
2、在同一个窗口(页面)下数据可以共享。
3、以键值对的形式存储使用。
存储：sessionStorage.setItem(key, value)。
获取：sessionStorage.getItem(key)。
删除：sessionStorage.remove(key)。
清空：sessionStorage.clear()。
<!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>
<input type="text">
<button class="set">存储</button>
<button class="get">获取</button>
<button class="remove">删除</button>
<button class="del">清空</button>
</body>
<script>
let ipt = document.querySelector('input')
let set = document.querySelector('.set')
let get = document.querySelector('.get')
let remove = document.querySelector('.remove')
let del = document.querySelector('.del')
// 存储
set.addEventListener('click', () => {
let val = ipt.value
sessionStorage.setItem('uname', val)
sessionStorage.setItem('pwd', val)
})
// 获取
get.addEventListener('click', () => {
console.log(sessionStorage.getItem('uname'))
})
// 移除
remove.addEventListener('click', () => {
sessionStorage.removeItem('uname')
})
// 清空
del.addEventListener('click', () => {
sessionStorage.clear()
})
</script>
</html>
window.localStorage
1、声明周期永久生效，除非手动删除，否则关闭页面也会存在。
2、可以多窗口(页面)共享，同一个浏览器可以共享。
3、以键值对的形式存储使用。
存储：localStorage.setItem(key, value)。
获取：localStorage.getItem(key)。
删除：localStorage.remove(key)。
清空：localStorage.clear()。
<!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>
<input type="text">
<button class="set">存储</button>
<button class="get">获取</button>
<button class="remove">删除</button>
<button class="del">清空</button>
</body>
<script>
let ipt = document.querySelector('input')
let set = document.querySelector('.set')
let get = document.querySelector('.get')
let remove = document.querySelector('.remove')
let del = document.querySelector('.del')
// 存储
set.addEventListener('click', () => {
let val = ipt.value
localStorage.setItem('uname', val)
localStorage.setItem('pwd', val)
})
// 获取
get.addEventListener('click', () => {
console.log(localStorage.getItem('uname'))
})
// 移除
remove.addEventListener('click', () => {
localStorage.removeItem('uname')
})
// 清空
del.addEventListener('click', () => {
localStorage.clear()
})
</script>
</html>
原创文章，作者：254126420，如若转载，请注明出处：https://blog.ytso.com/tech/pnotes/245239.html