HTML5 Web Storage

sessionStorage 和 localStorage 是 HTML5 Web Storage API 提供的,可以方便的在 web 请求之间保存数据。有了本地数据,就可以避免数据在浏览器和服务器间不必要地来回传递。

sessionStorage、localStorage、cookie 都是在浏览器端存储的数据,其中 sessionStorage 的概念很特别,引入了一个 “浏览器窗口” 的概念。sessionStorage 是在同源的同窗口(或 tab)中,始终存在的数据。也就是说只要这个浏览器窗口没有关闭,即使刷新页面或进入同源另一页面,数据仍然存在。关闭窗口后,sessionStorage 即被销毁。同时 “独立” 打开的不同窗口,即使是同一页面,sessionStorage 对象也是不同的。

Web Storage 带来的好处:

  1. 减少网络流量:一旦数据保存在本地后,就可以避免再向服务器请求数据,因此减少不必要的数据请求,减少数据在浏览器和服务器间不必要地来回传递。
  2. 快速显示数据:性能好,从本地读数据比通过网络从服务器获得数据快得多,本地数据可以即时获得。再加上网页本身也可以有缓存,因此整个页面和数据都在本地的话,可以立即显示。
  3. 临时存储:很多时候数据只需要在用户浏览一组页面期间使用,关闭窗口后数据就可以丢弃了,这种情况使用 sessionStorage 非常方便。

Cookie 和 HTML5 Web Storage 对比

共同点

都是保存在浏览器端,且同源的。

区别

  • 是否在 http 请求携带
    cookie:数据始终在同源的 http 请求中携带(即使不需要),即 cookie 在浏览器和服务器间来回传递。

    Web Storage:不会自动把数据发给服务器,仅在本地保存。

  • 访问限制
    cookie:数据还有路径(path)的概念,可以限制 cookie 只属于某个路径下。

  • 存储大小
    cookie:数据不能超过 4k,同时因为每次 http 请求都会携带 cookie,所以 cookie 只适合保存很小的数据,如会话标识。

    Web Storage:虽然也有存储大小的限制,但比 cookie 大得多,可以达到 5M 或更大。

  • 数据有效期
    cookie:只在设置的 cookie 过期时间之前一直有效,即使窗口或浏览器关闭。

    sessionStorage:仅在当前浏览器窗口关闭前有效,自然也就不可能持久保持。

    localStorage:始终有效,窗口或浏览器关闭也一直保存,因此用作持久数据。

  • 作用域
    cookie,localStorage:在所有同源窗口中都是共享的。

    sessionStorage:不在不同的浏览器窗口中共享,即使是同一个页面。

  • 对事件通知机制的支持
    Web Storage:支持事件通知机制,可以将数据更新的通知发送给监听者。

  • 方便程度
    Web Storage:的 api 接口使用更方便。

  • [注]:sessionStorage 与页面 js 数据对象的区别

    页面中一般的 js 对象或数据的生存期是仅在当前页面有效,因此刷新页面或转到另一页面这样的重新加载页面的情况,数据就不存在了。

    而 sessionStorage 只要同源的同窗口(或 tab)中,刷新页面或进入同源的不同页面,数据始终存在。也就是说只要这个浏览器窗口没有关闭,加载新页面或重新加载,数据仍然存在。

数据应该存储在 Cookies 还是 HTML5 Web Storage?

重要的数据还是应该存在_Cookies_中并设置HttpOnly (使用 HTTPS 还可以设置上Secure)。
因为 HTML5 Web Storage 易受 XSS 攻击,且 XSS 攻击具有较大的攻击途径,能一次成功的攻击就够影响到所有正在使用的用户。

参考

Where to Store JWTs - Cookies vs HTML5 Web Storage | Stormpath

请描述一下 cookies,sessionStorage 和 localStorage 的区别? - 游海东的技术专栏 - CSDN 博客

数据存储-cookie、sessionstorage、localstorage的更多相关文章

  1. session,cookie,sessionStorage,localStorage的区别及应用场景

    session,cookie,sessionStorage,localStorage的区别及应用场景 浏览器的缓存机制提供了可以将用户数据存储在客户端上的方式,可以利用cookie,session等跟 ...

  2. 缓存session,cookie,sessionStorage,localStorage的区别

    https://www.cnblogs.com/cencenyue/p/7604651.html(copy) 浅谈session,cookie,sessionStorage,localStorage的 ...

  3. 彻底弄清楚session,cookie,sessionStorage,localStorage的区别及应用场景(面试向)

    原文转载自「刘悦的技术博客」https://v3u.cn/a_id_94 客户端状态保持是一个老生常谈的问题了,归根结底追踪浏览器的用户身份及其相关数据无非就是以下四种方式:session,cooki ...

  4. 浏览器存储(cookie、localStorage、sessionStorage)

    互联网早期浏览器是没有状态维护,这个就导致一个问题就是服务器不知道浏览器的状态,无法判断是否是同一个浏览器.这样用户登录.购物车功能都无法实现,Lou Montulli在1994年引入到web中最终纳 ...

  5. jquery访问浏览器本地存储cookie,localStorage和sessionStorage

    前言:cookie,localStorage和sessionStorage都是浏览器本地存储数据的地方,其用法不尽相同:总结一下基本的用法. 一.cookie 定义: 存储在本地,容量最大4k,在同源 ...

  6. 数据存储之Web存储(sessionStorage localStorage globalStorage )

    Web Storage 两个目标 提供一种在cookie之外的存储会话守数据的途径 提供一种存储大量可以跨会话存在的数据机制 最初的Web Storage规范包含两个对象 sessionStorage ...

  7. 客户端数据存储cookie、localStoeage、sessionStorage(小记)

    一.数据存储分为客户端存储和服务端存储 1.而对于客户端存储,在html5以前只能通过cookie来实现:html 5以后增加了web存储(实际保存本地)的功能   (1)对于web存储有两个标准: ...

  8. cookie sessionStorage localStorage 区别

    sessionStorage 和 localStorage 是HTML5 Web Storage API 提供的,可以方便的在web请求之间保存数据.有了本地数据,就可以避免数据在浏览器和服务器间不必 ...

  9. 本地存储 cookie,session,localstorage( 一)基本概念及原生API

    http://www.w3school.com.cn/html5/html_5_webstorage.asp http://adamed.iteye.com/blog/1698740 localSto ...

随机推荐

  1. Scrapy 教程(十)-管道与数据库

    Scrapy 框架将爬取的数据通过管道进行处理,即 pipelines.py 文件. 管道处理流程 一.定义 item item 表示的是数据结构,定义了数据包括哪些字段 class TianqiIt ...

  2. Kotlin学习(5)类型系统

    可空性(避免空指针异常) /* *这个函数的参数代表传入一个String类型变量的实例,这代表它不可以为空 */ fun a(str:String){ println(str) } //这样调用a() ...

  3. 使用form表单提交请求如何获取后台返回的数据?

    问题描述 一般的form表单提交是单向的:只能给服务器发送数据,但是无法获取服务器返回的数据,也就是无法读取HTTP应答包. 想要真正的半双工通讯一般需要使用Ajax, 但是Ajax对文件传输也很麻烦 ...

  4. js 全世界最短的IE浏览器判断代码

    var ie = !+"\v1"; 仅仅需要7bytes!参见这篇文章,<32 bytes, ehr ... 9, ehr ... 7!!! to know if your ...

  5. linux MySql 在 Master 主从复制配置

    在 Master 服务器上建立用于 Slave 服务器复制数据的帐户 [root@master ~]# mysql mysql> grant replication slave,replicat ...

  6. mingetty - 控制台最小的 getty

    总览 SYNOPSIS mingetty [--noclear] [--nonewline] [--noissue] [--nohangup] [--nohostname] [--long-hostn ...

  7. centos 7 安装相关环境

    How To Create a Sudo User on CentOS 7 https://www.digitalocean.com/community/tutorials/how-to-create ...

  8. Django【第15篇】:Django之Form组件归类

    Form组件归类 一.Form类 创建Form类时,主要涉及到 [字段] 和 [插件],字段用于对用户请求数据的验证,插件用于自动生成HTML; 1.Django内置字段如下: 1 Field 2 r ...

  9. ping/curl

    ping查看网络连通情况 curl查看接口可用情况

  10. django的自定义约束

    准备阶段 在settings中的INSTALLED_APPS配置当前app,不然django无法找到自定义的simple_tag. 在app中创建templatetags模块(模块名只能是templa ...