Vue的学习与使用_06.浏览器的本地存储

1.本地存储

无论是本地存储还是会话存储都主要是使用4个API,且这四个API都是window对象所具有的,所有数据都是以键值对的形式传输的,

(1)setItem()

window.localStorage.setItem("key","value")

这个函数的作用是将传入的key与value存入浏览器中,出入的value默认是字符串,如果不是字符串则自动进行转换为字符串,如果value是对象,则会被转换为[object,Object],内部数据全部丢失,所以可以使用JSON.stringify(对象)

localStorage.setItem("key",JSON.stringify(对象));

如果每次传入的key的值不同则会将这些全部存储,而如果key重复了,则新来的会覆盖之前的.

(2)getItem()

localStorage.getItem("key");

可以从一个key得到一个value,但所有的value都是字符串,需要手动进行转换.
其中对象的转换为

let p = JSON.parse(localStorage.getItem("key"));	

(3)removeItem()

删除key对应的数据

localStorage.removeItem("key");

(4)clear()

清空所有的数据

localStorage.clear();

2.会话存储

与本地存储类似,将上方的所有localStorage替换为sessionStorage即可,功能类似,区别是localStorage在浏览器关闭后不会清除,而sessionStorage在每次浏览器关闭后都会清空