1.Web存储:
locationStorage:用于永久性保存数据
sessionStorage:用于临时存储数据(关闭页面时,数据丢失)
用法:(两个对象用法一致)
setItem(key,value) 存储数据
getItem(key) 取数据
removeItem(key) 删除数据
clear() 清空数据
属性: length
注意:key和value均为字符串类型
2.JSON对象
stringify(obj) 将obj抓换为字符串
parse(str) 将字符串(对象格式)转换为对象
<label for="">姓名:</label><input type="text" name="" id=""><br>
<label for="">密码:</label><input type="password"><br>
<button>登录</button>
<button>删除一条数据</button>
<button>清空数据</button>
<script>
var txt = document.querySelectorAll('input');
document.querySelector('button').onclick = function () {
var username = txt[0].value;
var pwd = txt[1].value;
var obj = {
name: username,
pwd: pwd,
};
//保存数据 多次调用,覆盖
saveDate(obj);
};
//保存数据
function saveDate(username, pwd) {
localStorage.setItem('uname', username);
localStorage.setItem('password', pwd);
}
//清除
var bs=document.querySelectorAll('button');
bs[1].onclick=function(){
//删除一条数据
// console.log(localStorage.length);
localStorage.removeItem('password');
};
bs[2].onclick=function(){
localStorage.clear();
};
//保存数据类型
function saveDate(obj) {
//将对象转换为字符串
var s = JSON.stringify(obj);
localStorage.setItem('person', s);
}
</script>