关于前端:浏览器缓存的几种方式

浏览器缓存

原文链接：https://note.noxussj.top/?source=sifo

浏览器缓存次要蕴含 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：申请时不会携带

原文链接：https://note.noxussj.top/?source=sifo