js 浏览器存储webStorage

js 浏览器存储webStorage

浏览器通过Window.sessionStorage和Window.localStorage属性来实现本地存储机制

相关API：
sessionStorage和localStorage的API是相同的

1. xxxxxStorage.setItem(‘key’,‘value’);
   该方法接受一个键和值作为参数，会把键值对添加到存储中，如果键名存在，则更新其对应的值
2. xxxxxStorage.getItem(‘key’);
   该方法接受一个键名作为参数，返回键名对应的值
3. xxxxxStorage.removeItem(‘key’);
   该方法接受一个键名作为参数，并把该键名从存储中删除
4. 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