前端存储方案一览

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数据库,⽤键值对进⾏储存。

  • 键值对储存
  • 异步
  • 支持事务
  • 同源限制
  • 储存空间大
  • 支持二进制储存
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 219,539评论 6 508
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 93,594评论 3 396
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 165,871评论 0 356
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,963评论 1 295
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,984评论 6 393
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,763评论 1 307
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,468评论 3 420
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 39,357评论 0 276
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,850评论 1 317
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 38,002评论 3 338
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 40,144评论 1 351
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,823评论 5 346
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,483评论 3 331
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 32,026评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 33,150评论 1 272
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 48,415评论 3 373
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 45,092评论 2 355

推荐阅读更多精彩内容

  • 昨天接了电话面试,面试前端的,面试官问了一下cookie和session的区别,当时回答的session是用于服务...
    写前端的大叔阅读 1,259评论 0 0
  • cookie 前言 网络早期最大的问题之一是如何管理状态。简而言之,服务器无法知道两个请求是否来自同一个浏览器。当...
    O蚂蚁O阅读 563评论 0 0
  • 三种本地存储方式 cookie 前言 网络早期最大的问题之一是如何管理状态。简而言之,服务器无法知道两个请求是否来...
    CodeMT阅读 245评论 0 0
  • 1. Web SQL Database HTML5的存储还有一种Web SQL Database方式,虽然还有浏览...
    grain先森阅读 3,495评论 2 51
  • 本文介绍本地数据存储的选型。简单总结一些查询到的关于本地数据存储的技术。 控制台展示前端存储 Chrome: 前端...
    谢大见阅读 9,074评论 1 8