前端浏览器缓存localStorage和sessionStorage

webStorage浏览器的存储一般内容大小支持5MB左右,每个浏览器可能还不一样。

浏览器端通过Window.sessionStorage和Window.localStorage属性来实现本地存储机制,localStorage 和 sessionStorage 的区别主要是在于其生存期。

生存期(菜鸟官方解释)

localStorage理论上来说是永久有效的,即不主动清空的话就不会消失,即使保存的数据超出了浏览器所规定的大小,也不会把旧数据清空而只会报错。但需要注意的是,在移动设备上的浏览器或各Native App用到的WebView里,localStorage都是不可靠的,可能会因为各种原因(比如说退出App、网络切换、内存不足等原因)被清空。
sessionStorage的生存期顾名思义,类似于session,只要关闭浏览器(也包括浏览器的标签页),就会被清空。由于sessionStorage的生存期太短,因此应用场景很有限,但从另一方面来看,不容易出现异常情况,比较可靠。

用法:

1.xxxxxStorage.setItem('key' , 'value')该方法接受一个键和值作为参数,会把键值添加到存储中,如果键名存在,则更新其对应的值;

2.xxxxxStorage.getItem('person')该方法接收一个键名作为参数,返回键名对应的值;

3.xxxxxStorage.removeItem('key')该方法接收一个键名作为参数,并把该键名从存储中删除;

4.xxxxxStorage.clear()该方法会清空存储中的所有数据;

tips:

1.SessionStorage存储的内容会随着浏览器窗口的关闭而消失;

2.LocalStorage存储的内容,需要手动清除才会消失;

3.xxxxxStorage.getItem(xxx)如果xxx对应的value获取不到,那么getItem的返回值就是null

4.JSON.parse(null)的结果仍然是null。

你可能感兴趣的:(前端,缓存,javascript)