1.window.sessionStorage
(1).生命周期为关闭浏览器窗口（关闭浏览器之后，所存储的数据也就随之清空）
(2).以键值对形式存取使用
(3).在同一窗口（页面）下数据可以共享
//存储数据
sessionStorage.setItem(key,val)
//获取数据
sessionStorage.getItem(key)
//删除数据
sessionStorage.removeItem(key)
//清除所有数据
sessionStorage.clear()
本地代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<input type="text">
<button class="set">存储数据</button>
<button class="get">获取数据</button>
<button class="del">删除数据</button>
<button class="clear">清空全部数据</button>
<script>
var ipt = document.querySelector('input');
var set = document.querySelector('.set');
var get = document.querySelector('.get');
var del = document.querySelector('.del');
var clear = document.querySelector('.clear');
set.addEventListener('click', function(){
var value = ipt.value;
sessionStorage.setItem('uname', value);
sessionStorage.setItem('uage', value);
sessionStorage.setItem('usex', value);
})
get.addEventListener('click',function(){
var getValue = sessionStorage.getItem('uname');
console.log(getValue);
})
del.addEventListener('click',function() {
sessionStorage.removeItem('uname');
sessionStorage.removeItem('uage');
})
clear.addEventListener('click',function(){
sessionStorage.clear();
})
</script>
</body>
</html>
演示图片：
2.window.localStorage
(1).生命周期永久生效，除非手动删除，否者关闭页面也会存在
(2).以键值对形式存取使用
(3).在多窗口（页面）（同一浏览器）下数据可以共享
//存储数据
localStorage.setItem(key,val)
//获取数据
localStorage.getItem(key)
//删除数据
localStorage.removeItem(key)
//清除所有数据
localStorage.clear()
区别：
（1）声明周期不同
（2）sessionStorage存储的数据只能在同一窗口下共享，localStorage存储的数据能够在多窗口下共享
1560
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
