浏览器缓存的几种方式!

浏览器缓存

浏览器缓存主要包含 cookie、 在 HTML5 新标准中新增了本地存储 localStorage 和会话存储 sessionStorage。

cookie

什么是 cookie?

cookie 是一些缓存数据,主要存储在你的电脑中。当你发起网络请求时也会携带当前域名端口下的 cookie 信息传输给后端。

创建 cookie

默认情况下,没有设置过期时间,当浏览器关闭时 cookie 就会被删除(关闭当前选项卡不会删除)。

document.cookie = 'name=xiaoming' // 'name=xiaoming'
document.cookie = 'age=18' // 'name=xiaoming; age=18'

创建 cookie 并设置 10 分钟后过期

// Thu Jan 12 2023 17:22:34 GMT+0800 (中国标准时间)
const expires = new Date(new Date().getTime() + 1000 * 60 * 10)
document.cookie = 'class=A; expires= ' + expires

读取 cookie

const cookie = document.cookie // 'name=xiaoming; age=18; class=A'

修改 cookie

相当于把旧的 cookie 进行了删除,在创建新的 cookie

document.cookie = 'name=libai' // 'age=18; class=A; name=libai'

删除 cookie

直接给 cookie 设置一个已过期的时间,那么关闭浏览器后则会被删除

document.cookie = 'class=A; expires= Thu Jan 01 1970 08:00:00 GMT+0800 (中国标准时间)'

localStorage

每个域名端口下都会存在一份独立的 localStorage 数据,它是没有过期时间的,只要你不手动清除,那么它会永远都在。localStorage 使用上会比 cookie 要简单。

创建 localStorage 属性

localStorage.setItem('name', 'xiaoming')

读取 localStorage 属性

localStorage.getItem('name') // 'xiaoming'

修改 localStorage 属性

localStorage.setItem('name', 'libai')

删除 localStorage 属性

localStorage.removeItem('name')

清空 localStorage 对象

localStorage.clear()

sessionStorage

每个域名端口下都会存在一份独立的 sessionStorage 数据,它是有过期时间的,当你关闭当前页面(包含浏览器选项卡)时,sessionStorage 缓存会被销毁。它的用法几乎和 localStorage 是相同的。

创建 sessionStorage 属性

sessionStorage.setItem('name', 'xiaoming')

读取 sessionStorage 属性

sessionStorage.getItem('name') // 'xiaoming'

修改 sessionStorage 属性

sessionStorage.setItem('name', 'libai')

删除 sessionStorage 属性

sessionStorage.removeItem('name')

清空 sessionStorage 对象

sessionStorage.clear()

以上三者的区别

存储大小

  • cookie:数据大小不能超过 4k

  • localStorage、sessionStorage:数据大小支持 5M 左右,不同浏览器存储大小不同

生命周期(有效时间)

  • cookie:需要设置有效期,过期后 cookie 就会销毁

  • localStorage:除非被手动清理,否则永久存在

  • sessionStorage:页面关闭(包括标签选项卡)后就会被销毁

存储形式

三者都是存储字符串类型,复杂对象可以采用 json 的 stringify 和 parse 方法来做处理

安全性

cookie:请求时一般会携带在 header 中

localStorage、sessionStorage:请求时不会携带

原文链接:菜园前端

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