外观
本地存储
为了让页面刷新或销毁后也能保存数据以便于下次访问页面时使用,HTML5让数据能够存放在用户浏览器中。它设置、读取方便,刷新页面也不会丢失数据,容量很大。
本地存储分为两类,一个是localStorage,另一个为sessionStorage。前者会被永久保存到计算机中,直到用户主动删除。后者则在浏览器被关闭后销毁。这两者都是内置对象,可以直接调用。
本地存储以键值对的形式存在,且值只能存储字符串。因此若它存储的是数字或对象,则需要做一些处理。
以localStorage为例,生产环境中也常常使用此对象。
// 设置普通对象
localStorage.setItem('key', 'value1'); //设置值
let value = localStorage.getItem('key'); //获取值
console.log(value);
localStorage.removeItem('key'); //删除值
// 设置对象,需要将对象和字符串相互转换
let obj = {'item1': 'value1', 'item2': 'value2'};
localStorage.setItem('obj', JSON.stringify(obj)); //设置对象类型
obj = JSON.parse(localStorage.getItem('obj')) //将字符串类型转换为对象