webStorage
1.存储内容大小-般支持5MB左右(不同浏览器可能还不-样)
2.浏览器端通过Window.sessionStorage和Window.localStorage属性来实现本地存储机制)
3.相关API:
1. xxxxStorage . setItem('key', 'value');
该方法接受一个键和值作为参数, 会把键值对添加到存储中,如果键名存在,则更新其对应的值。
2. xxxxStorage. getItem(' person');
该方法接受一个键名作为参数, 返回键名对应的值。
3. xxxxStorage . removeItem('key');
该方法接受一个键名作为参数, 并把该键名从存储中删除。
4. xxxxStorage . clear()
该方法会清空存储中的所有数据。
4.备注:
1. SessionStorage存储的内容会随着浏览器窗口关闭而消失。
2. LocalStorage存储的内容,需要手动清除才会消失。
3. xxxxStorage. getItem(xx)如果xxx对应的value获取不到,那么getItem的返回值是null.
4. JSON.parse(null)的结果依然是null。
localStorage
<body>
<h2>localStorage</h2>
<button onclick="saveData()" >点我保存数据</button>
<button onclick="readData()" >点我读取数据</button>
<button onclick="deleteData()" >点我删除数据</button>
<button onclick="deleteAllData()" >点我清空数据</button>
<script>
let p = {name:'张三',age:18}
function saveData(){
localStorage.setItem('msg','hello!')
localStorage.setItem('msg2',336)
localStorage.setItem('person',JSON.stringify(p))
}
function readData(){
console.log(localStorage.getItem('msg'));
console.log(localStorage.getItem('msg2'));
const result = localStorage.getItem('person')
console.log(JSON.parse(result));
console.log(localStorage.getItem('msg3'));
}
function deleteData(){
localStorage.removeItem('msg2')
}
function deleteAllData(){
localStorage.clear()
}
</script>
</body>
sessionStorage
<body>
<h2>sessionStorage</h2>
<button onclick="saveData()" >点我保存数据</button>
<button onclick="readData()" >点我读取数据</button>
<button onclick="deleteData()" >点我删除数据</button>
<button onclick="deleteAllData()" >点我清空数据</button>
<script>
let p = {name:'张三',age:18}
function saveData(){
sessionStorage.setItem('msg','hello!')
sessionStorage.setItem('msg2',336)
sessionStorage.setItem('person',JSON.stringify(p))
}
function readData(){
console.log(sessionStorage.getItem('msg'));
console.log(sessionStorage.getItem('msg2'));
const result = sessionStorage.getItem('person')
console.log(JSON.parse(result));
// console.log(sessionStorage.getItem('msg3'));
}
function deleteData(){
sessionStorage.removeItem('msg2')
}
function deleteAllData(){
sessionStorage.clear()
}
</script>
</body>