首页 > 其他分享 >前端存储方案一览

前端存储方案一览

时间:2023-09-02 20:31:28浏览次数:31  
标签:Web 储存 一览 存储 数据库 cookie W3C Cookie 前端


Cookies

在HTML5标准前本地储存的主要的也是最早提出的⽅式,优点是兼容性好,请求头⾃带cookie⽅便(使用fetch的话需要额外配置),缺点是⼤⼩只有4k,⾃动请求头加⼊cookie浪费流量,而且每个domain限制20个cookie,使⽤起来麻烦,需要自行封装相关方法。

  • Cookie一旦创建成功,名称就无法修改
  • Cookie是无法跨域名的,但是子域名之间共享
  • 有安全问题,如果Cookie被拦截了,那就可获得session的所有信息,预防方式包括设置httpOnly
  • Cookie在请求一个新的页面的时候都会被发送过去

跨域名共享方案:

  • Nginx反向代理
  • 单个站点登入后,通过setCookie的方式,在其他网站上写上Cookie,同时服务端的Session使用同一个节点

LocalStorage

HTML5加⼊的以键值对(Key-Value)为标准的⽅式,优点是操作⽅便,永久性储存(除⾮⼿动删除),⼤⼩为5M,兼容IE8+ 。

如果浏览器设置为隐私模式,那我们将无法读取到LocalStorage,同时受到同源策略的限制,非同源页面无法访问。

SessionStorage

与LocalStorage基本类似,区别是SessionStorage当⻚⾯关闭后会被清理,⽽且与cookie、LocalStorage不同,其主要用于临时保存同一窗口(或标签页)的数据,刷新页面时不会删除,关闭窗口或标签页之后将会删除这些数据。

Web SQL

2010年被W3C废弃的本地数据库数据存储⽅案,但是主流浏览器(⽕狐除外)都已经有了相关的实现,Web SQL类似于SQLite,是真正意义上的关系型数据库。Web SQL 数据库 API 并不是 HTML5 规范的一部分,但是它是一个独立的规范,引入了一组使用 SQL 操作客户端数据库的 APIs。

Beware. This specification is no longer in active maintenance and the Web Applications Working Group does not intend to maintain it further.

本文档是 2010 年 11 月 18 日 Web SQL 数据库工作组的说明。作为工作组说明发布并不意味着得到 W3C 成员的认可。这是一份草稿文件,可能随时被其他文件更新、替换或废止。除了正在进行的工作之外,引用本文件是不恰当的。W3C Web 应用程序工作组是负责本文档的 W3C 工作组。

IndexedDB

IndexedDB 是一种底层 API,用于在客户端存储大量的结构化数据(也包括文件/二进制大型对象(blobs))。其是被正式纳⼊HTML5标准的数据库储存⽅案,它是NoSQL数据库,⽤键值对进⾏储存。

  • 键值对储存
  • 异步
  • 支持事务
  • 同源限制
  • 储存空间大
  • 支持二进制储存



标签:Web,储存,一览,存储,数据库,cookie,W3C,Cookie,前端
From: https://blog.51cto.com/u_16237732/7334862

相关文章

  • 前端Vue仿企查查天眼查高管信息列表组件
    ​随着技术的不断发展,传统的开发方式使得系统的复杂度越来越高。在传统开发过程中,一个小小的改动或者一个小功能的增加可能会导致整体逻辑的修改,造成牵一发而动全身的情况。为了解决这个问题,我们采用了组件化的开发模式。通过组件化开发,可以有效地实现单独开发,单独维护,而且它们之......
  • 前端Vue仿企查查 天眼查知识产权标准信息列表组件
    ​引入Vue仿企查查天眼查知识产权标准信息列表组件随着技术的不断发展,传统的开发方式使得系统的复杂度越来越高。在传统开发过程中,一个小小的改动或者一个小功能的增加可能会导致整体逻辑的修改,造成牵一发而动全身的情况。为了解决这个问题,我们采用了组件化的开发模式。通过组件......
  • 在SQL server中如何写存储过程
    总结一下SQLserver中如何存储。USE[SSQADM] ----Use是跳转到哪个数据库,对这个数据库进行操作。GO    ----GO向SQLServer实用工具发出一批Transact-SQL语句结束的信号,相当于提交上面的SQL语句。----GO是把t-sql语句分批次执行。(一步成功了才会执行下一......
  • 2023年8月文章一览
    注:文章时间线被平台弄乱了,本是8月发的,变成了9月了。请忽略。2023年8月编程人总共更新了17篇文章。1.2023年7月文章一览2.ProgrammingAbstractionsinC阅读笔记:p72-p753.BramMoolenar4.ProgrammingabstractionsinC阅读笔记:p76-p835.ProgrammingabstractionsinC阅读笔记:p......
  • Springboot项目打成jar包,如何设置存储路径?并且上传的静态文件如何访问?
    第一步设置资源资源存储路径找到需要保存指定文件路径添加以下代码//保存上传的资源文件路径,路径在部署jar包同级目录。Stringpath=System.getProperty("user.dir")+"/static/images/";Filedir=newFile(path);if(!dir.exists()){dir.mkdirs();}......
  • 来玩,前端性能优化(+面试必问:宏任务和微任务)
    前端性能优化相关的“技能点”笔者之前也写过几篇,但是大多都是小打小闹。我重新整理了曾经使用过的性能优化手段。本文介绍三种方案:页面资源预加载、服务请求优化和非首屏视图延迟加载。页面资源预加载页面是不可能真正预加载的,但是有一个地方:入口代码中依赖的js模块。一般来说,......
  • 前端-关于选型的二三事
    前端技术框架选型对于开发高效、可扩展的前端应用程序至关重要。在本文中,我们将探讨几个流行的前端技术框架,并分析其优点和缺点,以帮助开发人员做出明智的决策。AngularAngular是由Google开发并维护的前端框架,它基于TypeScript,使得开发人员可以充分利用类型安全和面向对象的优势。An......
  • JSONCPP向浏览器前端发送服务器本地文件列表
    服务器解析了浏览器请求之后,要进行响应响应体里需要存放请求的内容HTML标签:是页面的核心内容,定义了页面有什么内容。CSS:控制HTML元素的排版布局和展示方式,是美化页面文档的。JavaScript:让用户与页面进行交互,或在网页背后默默操控网页,以便让显示的内容与效果有所改变。对网页来......
  • 开课吧前端1期.阶段1:初识ES6和ES6兼容性和新特性
    1、ECMAScript和JavaScript关系ECMA是标准,JS是实现  类似于HTML5是标准,IE10,Chrome谷歌,FireFox火狐都是实现换句话说,将来也可能有其他,XX某某Script来实现ECMA标准 ECMAScript简称ECMA或ES  目前也只有JavaScript实现,所以可以理解ECMAScript==JS目前版......
  • Linux文件系统及存储
                   ......