Storage 本质就是cookie的升级版-- 本地存储， 数据回显， 同步购物车
1.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="button" value="设置存储信息">
<input type="button" value="获取存储信息">
<input type="button" value="删除存储信息"><br>
name:<input type="text"><br>
pwd:<input type="text">
</body>
<script>
window.onload = function () {
var aBtn = document.getElementsByTagName('input');
aBtn[0].onclick = function () {//设置本地存储
window.localStorage.setItem('name', aBtn[3].value);//永久存储
alert(aBtn[4].value)
window.sessionStorage.setItem('pwd',aBtn[4].value);//临时存储
}
//获取本地存储信息
aBtn[1].onclick = function () {
alert("key为name的："+window.localStorage.getItem('name'));
alert("key为pwd的："+window.sessionStorage.getItem('pwd'));
}
//删除本地存储信息
aBtn[2].onclick = function () {
window.localStorage.removeItem('name');
window.localStorage.removeItem('pwd');
}
}
</script>
</html>
2. 回显数据， 关闭浏览器的时候保存信息到本地，加载页面的时候加载本地信息
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>数据回显</title>
</head>
<body>
<p>用户名：<input type="text"></p>
<p>
性别：<input type="radio" value="男" name="sex">男
性别：<input type="radio" value="女" name="sex">女
</p>
内容：<textarea name="content" id="content" cols="30" rows="10"></textarea>
<input type="button" value="清除所有本地存储" id="btn1">
</body>
<script>
window.onload = function () {
var aInput = document.getElementsByTagName('input')
var oT = document.getElementById('content')
var oBtn = document.getElementById('btn1')
//先从本地去查询数据做回显
if (window.localStorage.getItem('name')){
aInput[0].value = window.localStorage.getItem('name');
}
for (var i= 1; i < aInput.length; i++){
if (aInput[i].value == window.localStorage.getItem('sex')){
aInput[i].checked = true;
}
}
if (window.localStorage.getItem('content')) {
oT.value = window.localStorage.getItem('content');
}
//关闭浏览器的时候保存数据到本地
window.onunload = function () {
if (aInput[0].value){
window.localStorage.setItem('name', aInput[0].value);
}
for (var i= 0; i < aInput.length; i++){
if (aInput[i].checked){
window.localStorage.setItem('sex', aInput[i].value);
}
}
if (oT.value){
window.localStorage.setItem('content', oT.value);
}
}
oBtn.onclick = function () {
window.localStorage.clear();
}
}
</script>
</html>
3. 同步购物车 --- 测试不行，？？？
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>同步</title>
</head>
<body>
<input type="checkbox" name="fruit" value="苹果">苹果<br>
<input type="checkbox" name="fruit" value="梨子">梨子<br>
<input type="checkbox" name="fruit" value="香蕉">香蕉<br>
<input type="checkbox" name="fruit" value="菠萝">菠萝<br>
<input type="checkbox" name="fruit" value="橙子">橙子<br>
</body>
<script>
window.onload = function () {
var aInput = document.getElementsByTagName('li');
for (var i = 0; i < aInput.length; i++) {
aInput[i].onclick = function () {
if (this.checked){
window.localStorage.setItem('sel', this.value);
} else {
window.localStorage.setItem('unsel', this.value);
}
};
}
window.addEventListener('storage', function (ev) {
if (ev.key == 'sel'){
for (var i = 0; i < aInput.length; i++){
if (ev.newValue == aInput[i].value){
aInput[i].checked = true;
}
}
} else if (ev.key == 'unsel') {
for (var i = 0; i < aInput.length; i++ ){
if (ev.newValue == aInput[i].value){
aInput[i].checked = false;
}
}
}
})
}
</script>
</html>
