localstorage与sessionstorage
localstorage
1.localStorage:本地存储
将数据存储到浏览器
2.语法
存： localStorage.setItem('属性名','属性值')
取： localStorage.getItem('属性名')
删： localStorage.removeItem('属性名')
清空： localStorage.clear()
3.注意点
a.存储的数据只能是字符串类型。如果是其他数据类型则会自动调用toString()方法转成字符串
b.永久存储。除非自己删，否则一直存在于浏览器
//存
document.getElementById('btn1').onclick = function(){
localStorage.setItem('name','班长');
localStorage.setItem('age',18);
localStorage.setItem('girlFriend',['111','222','333']);
}
//取
document.getElementById('btn2').onclick = function(){
let age = localStorage.getItem('age');
console.log(age);
}
//删
document.getElementById('btn3').onclick = function(){
localStorage.removeItem('girlFriend');
}
//清空:一次性删除所有数据
document.getElementById('btn4').onclick = function(){
localStorage.clear();
}
sessionStorage
1.sessionStorage相当于短命版的localStorage，其他用法完全一致
2.两者区别：HP值不同
localStorage：永久存储（存在硬盘，HP值无限）
sessionStorage：临时存储（存在内存，HP值一条命，只要浏览器关闭就没有了）
localStorage如何存储对象类型数据
<body>
<button class="btn1">点我存储</button>
<button class="btn2">点我读取</button>
<script>
/*
1.localStorage如何存储对象类型数据： 使用JSON格式字符串
2.JSON对象是什么 ： 本质是一种字符串格式
'{"name":"admin","password","123456"}'
3.JSON对象作用： 解决跨平台兼容性
* 实际开发中，我们的数据来源于服务器。 而服务器并不一定是用js语言开发的，例如python、java、c++等，
不同的编程语句数据类型是不一样的。为了解决这个问题，人们发明了一种所有编程之言都支持的格式，就是JSON格式对象。 json格式本质是一个字符串，里面所有的数据都要用双引号包起来
4.JSON与js互转
4.1 json转js : JSON.parse(json对象)
4.2 js转json : JSON.stringify(js对象)
*/
let json = '{"name":"admin","password":"123456"}'
console.log(JSON.parse(json))
let js = { name: 'admin', password: 123456 }
console.log(JSON.stringify(js))
document.querySelector('.btn1').onclick = function () {
//存储： 将js对象转成json格式字符串
localStorage.setItem('user', JSON.stringify(js))
}
document.querySelector('.btn2').onclick = function () {
//读取： 将读取到的json格式字符串转成对象
//1.先读取json格式
let json = localStorage.getItem('user')
//2.然后转成js对象
let js = JSON.parse(json)
console.log(js)
}
</script>
