sessionStorage 、localStorage 的区别和使用场景

2,540 阅读2分钟

1.下定义,什么是sessionStorage、localStorage?

sessionStorage和localStorage是浏览器厂商约定开放给开发者的保存数据缓存的api

延伸:什么是数据缓存?

例如jpg、png、text文本等数据保存在内存或硬盘里一段时间以备重新读取使用称之为数据缓存。

2.sessionStorage、localStorage常用的方法有哪些?(从前端开发者角度你可以认为sessionStorage、localStorage是一个对象)

sessionStorage.setItem(key,value) 保存数据到内存中 (key键-要保存数据的名称 ,value值-要保存的数据)

sessionStorage.getItem(key) 从内存的缓存数据获取键为 key 的数据缓存

sessionStorage.removeItem(key) 从内存中移除键为key的数据缓存

localStorage.setItem(key,value) 保存数据到硬盘中 (key键-要保存数据的名称 ,value值-要保存的数据)

localStorage.getItem(key) 从硬盘的缓存数据获取键为 key 的数据缓存

localStorage.removeItem(key) 从硬盘中移除键为key的数据缓存

延伸:localStorage、sessionStorage是window对象的属性之一;window.sessionStorage.setItem() === sessionStorage.setItem;

3.value值的数据类型只能是字符串。那如何保存对象和数组等数据类型呢?

let userInfo = {name:"konglingzhan",age:28}

sessionStorage.setItem("userInfo",JSON.stringify(userInfo)); 将数组或对象用JSON.stringify()转化为json字符串再保存

let myUserInfo = JSON.parse(sessionStorage.getItem("userInfo")); 读取的时候用JSON.parse将json字符串转化为数组或对象再使用

4.两者的区别是什么呢?

1.sessionStorage的数据缓存是保存在网页窗口的进程内存或线程内存中的,当网页窗口关闭的时候sessionStorage的数据缓存也自动清除了

2.localStorage的数据缓存是保存在物理硬盘中的,数据不会随着网页窗口关闭或者关闭浏览器而丢失。当需要清除的时候需要到浏览器的设置里手动清除

5.一些使用场景?

1.web后台管理系统调用登录接口时保存返回的用户信息......

说到底知道了以上原理之后使用场景其实就是缓存一些数据以备复用,而不需要每次需要这些数据的时候都去请求接口