浏览器存储数据方式汇总

最新推荐文章于 2024-05-31 08:56:12 发布

原创最新推荐文章于 2024-05-31 08:56:12 发布 · 1k 阅读

3 ·

CC 4.0 BY-SA版权

浏览器专栏收录该内容

0 篇文章

订阅专栏

本文详细介绍了五种浏览器数据存储方式：LocalStorage、SessionStorage、IndexedDB、WebSQL和Cookie。对比了它们的特点和使用场景，如LocalStorage的永久存储、SessionStorage的会话周期存储等，适合前端开发者参考。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

存储方式类别

我们以我们现在最常用的Google浏览器为例，f12然后查看Application
在这里插入图片描述
从图中可以看出Google浏览器的数据存储方式有以下5种：

Local Storage
Session Storage
IndexedDB
Web SQL
Cookie

区别和使用

1.Local Storage

localStorage 中的键值对是以字符串的形式存储，除非清除，否则长期有效(永久有效)。
在这里插入图片描述
使用如下：

var obj = {"status":200,"msg":"登录成功",obj:null}
//存
window.localStorage.setItem('key',JSON.stringify(obj))
//取
JSON.parse(window.localStorage.getItem('key'))
// 删除
window.localStorage.remove('key')
//清空
window.localStorage.clear()

2.Session Storage

sessionStorage也是以字符串的形式存储，生命周期为一次会话，即打开浏览器到关闭浏览器(关闭浏览器数据就没了)
使用如下：

window.sessionStorage.setItem('key')
window.sessionStorage.getItem('key')

3.IndexedDB

IndexedDB 是一个事务型的数据库系统. 然而, 它是使用 JavaScript 对象而非列数固定的表格来储存数据的.使用的比较少。

4. Cookie

使用：https://blog.youkuaiyun.com/qq_29132907/article/details/80390792

以上一个存储方式中我们现在常用的是Session Storage、Local Storage、Cookie三者更多详细比较