浏览器原理之本地存储

一 浏览器本地存储方式及使用场景

  1. Cookies:

    • 小段数据,由服务器发送到用户浏览器,浏览器将其存储并在以后的请求中回送到服务器。
    • 使用场景:会话管理(登录状态、用户偏好设置)、个性化(用户主题)、跟踪(分析用户行为)。
  2. LocalStorage:

    • 提供了一个在浏览器中存储数据的方式,数据无过期时间,直到显式地清除。
    • 使用场景:长期数据存储、网站偏好设置、无需每次都由服务器读取的大量数据。
  3. SessionStorage:

    • 类似于LocalStorage,但其存储的数据在页面会话结束时被清除(浏览器窗口关闭)。
    • 使用场景:会话级别的状态存储,如单个登录会话的用户界面状态。
  4. IndexedDB:

    • 一个允许你存储大量数据在用户浏览器中的低级API。支持事务、存储二进制数据等。
    • 使用场景:复杂的数据集合、离线应用程序、大规模数据处理、客户端数据库解决方案。

二 Cookie字段及其作用

  • Name:Cookie的名字。
  • Value:Cookie的值。
  • Domain:Cookie对哪个域是有效的。
  • Path:指定一个URL路径,只有路径匹配时,浏览器才会发送Cookie。
  • Expires/Max-Age:定义Cookie的过期时间。如果不设置,Cookie会在浏览器关闭时失效。
  • Secure:标记为Secure的Cookie只应通过被HTTPS协议加密过的请求发送给服务端。
  • HttpOnly:设置HttpOnly属性的Cookie不能通过JavaScript的Document.cookie API访问。

Cookie、LocalStorage、SessionStorage区别

  • 存储大小
    • Cookie:一般限制在4KB。
    • LocalStorage 和 SessionStorage:可以存储大约5MB的数据。
  • 生命周期
    • Cookie:可以设置过期时间,不设置则默认为会话结束时过期。
    • LocalStorage:数据没有过期时间,需要显式清除。
    • SessionStorage:数据仅在页面会话期间可用,窗口或标签页关闭后数据被清除。
  • 数据访问
    • Cookie:每次都会随HTTP请求发送到服务器,影响性能。
    • LocalStorage 和 SessionStorage:仅在客户端中访问,不与服务器通信。

三 IndexedDB的特点

  • NoSQL数据库:IndexedDB允许你存储和检索对象,是一个事务性数据库系统。
  • 支持大数据量存储:相比LocalStorage提供更大的存储容量。
  • 异步:操作IndexedDB的API是异步的,不会阻塞浏览器。
  • 支持事务:支持事务功能,可以进行错误处理和回滚。
  • 支持索引:可以创建对数据的索引,优化查询效率。

这些存储技术各有特点和适用场景,了解它们的差异和限制对于设计有效的前端存储策略非常重要。

相关推荐
别拿曾经看以后~21 分钟前
【el-form】记一例好用的el-input输入框回车调接口和el-button按钮防重点击
javascript·vue.js·elementui
我要洋人死24 分钟前
导航栏及下拉菜单的实现
前端·css·css3
川石课堂软件测试27 分钟前
性能测试|docker容器下搭建JMeter+Grafana+Influxdb监控可视化平台
运维·javascript·深度学习·jmeter·docker·容器·grafana
科技探秘人36 分钟前
Chrome与火狐哪个浏览器的隐私追踪功能更好
前端·chrome
科技探秘人36 分钟前
Chrome与傲游浏览器性能与功能的深度对比
前端·chrome
JerryXZR42 分钟前
前端开发中ES6的技术细节二
前端·javascript·es6
七星静香44 分钟前
laravel chunkById 分块查询 使用时的问题
java·前端·laravel
q2498596931 小时前
前端预览word、excel、ppt
前端·word·excel
小华同学ai1 小时前
wflow-web:开源啦 ,高仿钉钉、飞书、企业微信的审批流程设计器,轻松打造属于你的工作流设计器
前端·钉钉·飞书
problc1 小时前
Flutter中文字体设置指南:打造个性化的应用体验
android·javascript·flutter