您的位置：首页 > Web前端 > HTML5

H5本地存储storage

2017-07-10 12:13 253 查看 
storage:
sessionStorage
session临时回话，从页面打开到页面关闭的时间段
窗口的临时存储，页面关闭，本地存储消失
localStorage
永久存储    （可以手动删除数据）
Storage的特点
存储量限制 ( 5M )
客户端完成，不会请求服务器处理
sessionStorage数据是不共享、 localStorage共享

window.sessionStorage
window.localStorage
setItem():
设置数据，key\value类型，类型都是字符串
可以用获取属性的形式操作
getItem():
获取数据，通过key来获取到相应的value
removeItem():
删除数据，通过key来删除相应的value
clear():
删除全部存储的值


模拟登陆

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
* {margin: 0; padding: 0;}
a {text-decoration: none;}
ul,li {list-style: none;}
body {font-family: "Microsoft yahei";}
.login {display: none;}
</style>
</head>
<body>
<input type="text" id="user">
<input type="text" id="password">
<input type="button" id='login' value='登录'>
<div class="login"></div>
<input type="button" id='exit' value='退出'>
<script>
/*
storage:
sessionStorage
session临时回话，从页面打开到页面关闭的时间段
窗口的临时存储，页面关闭，本地存储消失
localStorage
永久存储    （可以手动删除数据）
Storage的特点
存储量限制 ( 5M )
客户端完成，不会请求服务器处理
sessionStorage数据是不共享、 localStorage共享

window.sessionStorage
window.localStorage
setItem():
设置数据，key\value类型，类型都是字符串
可以用获取属性的形式操作
getItem():
获取数据，通过key来获取到相应的value
removeItem():
删除数据，通过key来删除相应的value
clear():
删除全部存储的值
*/
var User = document.querySelector('.login');
if(window.localStorage.getItem('user')){
login.style.display = "none";
User.innerHTML = "你好,"+ window.localStorage.getItem('user');
User.style.display = 'inline-block';
user.value = window.localStorage.getItem('user');
}
// if(window.sessionStorage.getItem('user')){
//     login.style.display = "none";
//     User.innerHTML = "你好,"+ window.sessionStorage.getItem('user');
//     User.style.display = 'inline-block';
//     user.value = window.sessionStorage.getItem('user');
// }
login.onclick = function (e) {
console.log(window.localStorage);

window.localStorage.setItem('user',user.value);
// window.sessionStorage.setItem('user',user.value);
alert('登录成功');
};
exit.onclick = function () {

// window.localStorage.clear();
window.localStorage.removeItem('user');
}
</script>
</body>
</html>


多个同一页面数据共享

服务器下:
监听存储事件:
当数据有修改或删除的情况下，就会触发storage事件
在对数据进行改变的窗口对象上是不会触发的
Key : 修改或删除的key值，如果调用clear(),key为null
newValue  :  新设置的值，如果调用removeStorage(),key为null
oldValue :  调用改变前的value值
storageArea : 当前的storage对象
url :  触发该脚本变化的文档的url
注：session同窗口才可以,例子：iframe操作


<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
<style type="text/css">
* {margin: 0; padding: 0;}
a {text-decoration: none;}
ul,li {list-style: none;}
body {font-family: "Microsoft yahei";}
</style>
</head>
<body>
<input type="checkbox" value='芒果'/>芒果
<input type="checkbox" value='香蕉'/>香蕉
<input type="checkbox" value='西瓜'/>西瓜
<input type="checkbox" value='橘子'/>橘子
<input type="checkbox"  value='桃子'/>桃子

<script type="text/javascript">
/*
服务器下:
监听存储事件:
当数据有修改或删除的情况下，就会触发storage事件
在对数据进行改变的窗口对象上是不会触发的
Key : 修改或删除的key值，如果调用clear(),key为null
newValue  :  新设置的值，如果调用removeStorage(),key为null
oldValue :  调用改变前的value值
storageArea : 当前的storage对象
url :  触发该脚本变化的文档的url
注：session同窗口才可以,例子：iframe操作

*/
var Input = document.querySelectorAll('input');
for (var i = 0; i < Input.length; i++) {
Input[i].onclick = function (e) {
if( this.checked ){
window.localStorage.setItem('set',this.value);
console.log(1);
}else{
window.localStorage.setItem('no',this.value);
console.log(2);
}
}
}
window.addEventListener('storage',function (e) {
var e = e||window.event;
console.log(1);
if(e.key == 'set'){
for (var i = 0; i < Input.length; i++) {
if(e.newValue == Input[i].value){
Input[i].checked = true;
}
}
}else if(e.key == 'no'){
for (var i = 0; i < Input.length; i++) {
if(e.newValue == Input[i].value){
Input[i].checked = false;
}
}
}
})
</script>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航