【前端工程师】总结一下前端存储

简介: 【前端工程师】总结一下前端存储

cookie


为什么会有cookie


http协议的无状态,所谓无状态即是服务器并不是知道这次的请求和上次的请求是不是同一个client发来的,就好比你经常去一家超市买东西,老板并不记得你是谁。但是如果你每次带着你的会员卡过来,那么老板就可以识别出你是谁了,cookie的作用类似于会员卡起的作用。


大概流程


当服务器收到HTTP请求时,服务器可以在响应头里面添加一个Set-Cookie选项。浏览器收到响应后通常会保存下Cookie,之后对该服务器每一次请求中都通过Cookie请求头部将Cookie信息发送给服务器。另外,Cookie的过期时间、域、路径、有效期、适用站点都可以根据需要来指定。

当然了,浏览器端也可以操作cookie,document.cookie可以获取当前页面的所有cookie。


细节


domain、path


这两个属性决定了cookie是否会被发往哪些URL

Domain 标识指定了哪些主机可以接受Cookie。如果不指定,默认为当前文档的主机(不包含子域名)。如果指定了Domain,则一般包含子域名。

例如,如果设置 Domain=mozilla.org,则Cookie也包含在子域名中(如developer.mozilla.org)。

Path 标识指定了主机下的哪些路径可以接受Cookie(该URL路径必须存在于请求URL中)。以字符 %x2F ("/") 作为路径分隔符,子路径也会被匹配。

例如domain=qq.com,path=/blog,则该cookie会被发往:

  • qq.com/blog
  • wx.qq.com/blog
  • wx.qq.com/blog/aa
  • ....


expires、max-age


这两个属性决定了cookie在浏览器保存多久

具体的细节为:

  • Expires 为 Cookie 的删除设置一个过期的日期
  • Max-age 设置一个 Cookie 将要过期的秒数
  • IE 浏览器(ie6、ie7 和 ie8) 不支持 max-age,所有的浏览器都支持 expires
  • 如果同时设置了expires和max-age,那么支持max-age的浏览器会忽略expires的值,不支持max-age的浏览器会忽略max-age只支持expires
  • 如果expires和max-age都不设置,该cookie会成为一个session cookie,即关闭浏览器的时候会被自动删除


secure和httpOnly


标记为 Secure 的Cookie只应通过被HTTPS协议加密过的请求发送给服务端。但即便设置了 Secure 标记,敏感信息也不应该通过Cookie传输,因为Cookie有其固有的不安全性,Secure 标记也无法提供确实的安全保障。从 Chrome 52 和 Firefox 52 开始,不安全的站点(http:)无法使用Cookie的 Secure 标记

为避免跨域脚本 (XSS) 攻击,通过JavaScript的 Document.cookie API无法访问带有 HttpOnly 标记的Cookie,它们只应该发送给服务端。如果包含服务端 Session 信息的 Cookie 不想被客户端 JavaScript 脚本调用,那么就应该为其设置 HttpOnly 标记。


如何设置cookie


服务端


服务端set-cookie即可

如下图是GitHub的设置cookie

image.png


浏览器


直接在JavaScript里操作即可:

document.cookie="age=12; expires=Thu, 26 Feb 2116 11:50:25 GMT; domain=github.com; path=/";


如何修改cookie


修改一个cookie时,要保证name-domain-path一致,否则不会修改旧值,而是添加了一个新的 cookie。


如何删除cookie


保证name-domain-path一致,并且把expires设置为一个过去的时间点


sessionStorage


使用


setItem(key, val);

getItem(key)

image.pngimage.png


细节


  • 只有设置sessionStorage的当前域才能使用
  • 只有页面刷新才不会清除掉sessionStorage。剩下的均会清理掉sessionStorage(比如打开新的tab、关掉当前tab再新开一个tab,更别提关闭浏览器了)


localStorage


使用

setItem(key, val);

getItem(key)

image.png

image.png

细节


  • 只有设置localStorage的当前域才能使用,但是新开的tab还可以使用且关闭浏览器重新打开还在
  • 用户不主动删除的话会一直存储下去
  • 大小为4M
  • localStorage可以存储k-v形式的数据。存储的值需要是字符串类型,没法直接存储对象,但是可以将对象序列化为字符串再存入。如果强行存入object的话,就会被调用object.toString从而悲剧,正确的方法应该是JSON.stringify


websql


Web SQL 数据库 API 并不是 HTML5 规范的一部分,但是它是一个独立的规范,引入了一组使用 SQL 操作客户端数据库的 APIs。


使用


3个核心方法:

  • openDatabase:这个方法使用现有的数据库或者新建的数据库创建一个数据库对象。
  • transaction:这个方法让我们能够控制一个事务,以及基于这种情况执行提交或者回滚。
  • executeSql:这个方法用于执行实际的 SQL 查询。
    具体的使用参教程


indexdb


和websql类似,但是可以直接使用JavaScript来操作,具体的参看MDN-indexdb


参考:

MDN-cookie

[聊一聊系列]聊一聊前端存储那些事儿

聊一聊 cookie

http cookie


相关文章
|
存储 前端开发 测试技术
前端代码托管:存储库管理综合指南
前端代码托管:存储库管理综合指南
159 1
|
1月前
|
存储 监控 前端开发
如何实现前端框架数据驱动方式的数据加密存储?
实现前端框架数据驱动方式的数据加密存储需要综合考虑多个因素,包括加密算法的选择、密钥管理、传输安全、服务器端处理等。通过合理的设计和实施,能够有效提高数据的安全性,保护用户的隐私和敏感信息。但需要注意的是,前端加密存储不能完全替代后端的安全措施,后端的安全防护仍然是不可或缺的。
39 3
|
1月前
|
存储 前端开发 安全
如何确保前端框架数据驱动方式的数据加密存储的兼容性?
确保前端框架数据驱动方式的数据加密存储的兼容性需要综合考虑多个因素,通过充分的评估、测试、关注和更新,以及与其他技术的协调配合,来提高兼容性的可靠性,为用户提供稳定和安全的使用体验。
34 2
|
2月前
|
存储 弹性计算 算法
前端大模型应用笔记(四):如何在资源受限例如1核和1G内存的端侧或ECS上运行一个合适的向量存储库及如何优化
本文探讨了在资源受限的嵌入式设备(如1核处理器和1GB内存)上实现高效向量存储和检索的方法,旨在支持端侧大模型应用。文章分析了Annoy、HNSWLib、NMSLib、FLANN、VP-Trees和Lshbox等向量存储库的特点与适用场景,推荐Annoy作为多数情况下的首选方案,并提出了数据预处理、索引优化、查询优化等策略以提升性能。通过这些方法,即使在资源受限的环境中也能实现高效的向量检索。
|
2月前
|
存储 前端开发 JavaScript
🚀 10 个 GitHub 存储库,助你成为前端巨匠✨
本文介绍了10个极具价值的GitHub存储库,旨在帮助各级JavaScript开发人员提升技能。这些资源涵盖了从基本概念到高级算法、编码风格指南、面试准备等各个方面,包括经典书籍、实用工具和面试手册。无论您是刚入门的新手还是有经验的开发者,这些存储库都能为您提供丰富的学习资源,助您在JavaScript领域更进一步。探索这些资源,开启您的学习之旅吧!
67 0
🚀 10 个 GitHub 存储库,助你成为前端巨匠✨
|
2月前
|
存储 前端开发 API
前端开发中,Web Storage的存储数据的方法localstorage和sessionStorage的使用及区别
前端开发中,Web Storage的存储数据的方法localstorage和sessionStorage的使用及区别
123 0
|
6月前
|
存储 缓存 移动开发
前端开发中常用的存储方法(带解析)
前端存储方法包括Cookie、localStorage、sessionStorage、IndexedDB和已废弃的WebSQL。Cookie用于存储小量数据,每次请求时发送到服务器,可设置过期时间。localStorage和sessionStorage都是HTML5提供的,前者数据永久存储,后者会话关闭后清除。IndexedDB是存储大量结构化数据的数据库,支持索引和事务。WebSQL已废弃,但部分浏览器仍支持。Cache Storage用于缓存响应,提高离线访问性能,通过Service Worker控制。
|
7月前
|
存储 前端开发
开发指南018-前端存储
src/utils/qlm_store.js封装了前端存储底层函数。登录后的用户信息都是通过调用底层函数进行保存的。
|
7月前
|
存储 前端开发 JavaScript
前端代码托管:存储库管理综合指南
前端代码托管:存储库管理综合指南
138 0
|
7月前
|
存储 缓存 前端开发
中高级前端工程师都需要熟悉的技能--前端缓存
中高级前端工程师都需要熟悉的技能--前端缓存