js 浏览器存储webStorage
浏览器通过Window.sessionStorage和Window.localStorage属性来实现本地存储机制
相关API:
sessionStorage和localStorage的API是相同的
- xxxxxStorage.setItem(‘key’,‘value’);
该方法接受一个键和值作为参数,会把键值对添加到存储中,如果键名存在,则更新其对应的值 - xxxxxStorage.getItem(‘key’);
该方法接受一个键名作为参数,返回键名对应的值 - xxxxxStorage.removeItem(‘key’);
该方法接受一个键名作为参数,并把该键名从存储中删除 - xxxxxStorage.clear();
该方法会清空存储中的所有数据
let p = {
name:'张三',age:18}
function saveData(){
localStorage.setItem('msg','hello');
localStorage.setItem('msg2',666); //666存储后为字符串
localStorage.setItem('person',JSON.stringify(p));
}
function readData(){
console.log(localStorage.getItem('msg'));
const result = localStorage.getItem('person');
console.log(JSON.parse(result));
}
function deleteData(){
localStorage.removeItem('msg2');
}
function deleteAllData(){
localStorage.clear();
}
- sessionStorage存储的内容会随着浏览器窗口关闭而消失
- localStorage存储的内容,需要手动清除才会消失
- xxxxxStorage.getItem(xxx),如果xxx对应的value获取不到,那么getItem的返回值是null
- JSON.parse(null)的结果依然是null