数据存储-cookie、sessionstorage、localstorage
HTML5 Web Storage
sessionStorage 和 localStorage 是 HTML5 Web Storage API 提供的,可以方便的在 web 请求之间保存数据。有了本地数据,就可以避免数据在浏览器和服务器间不必要地来回传递。
sessionStorage、localStorage、cookie 都是在浏览器端存储的数据,其中 sessionStorage 的概念很特别,引入了一个 “浏览器窗口” 的概念。sessionStorage 是在同源的同窗口(或 tab)中,始终存在的数据。也就是说只要这个浏览器窗口没有关闭,即使刷新页面或进入同源另一页面,数据仍然存在。关闭窗口后,sessionStorage 即被销毁。同时 “独立” 打开的不同窗口,即使是同一页面,sessionStorage 对象也是不同的。
Web Storage 带来的好处:
- 减少网络流量:一旦数据保存在本地后,就可以避免再向服务器请求数据,因此减少不必要的数据请求,减少数据在浏览器和服务器间不必要地来回传递。
- 快速显示数据:性能好,从本地读数据比通过网络从服务器获得数据快得多,本地数据可以即时获得。再加上网页本身也可以有缓存,因此整个页面和数据都在本地的话,可以立即显示。
- 临时存储:很多时候数据只需要在用户浏览一组页面期间使用,关闭窗口后数据就可以丢弃了,这种情况使用 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的更多相关文章
- session,cookie,sessionStorage,localStorage的区别及应用场景
session,cookie,sessionStorage,localStorage的区别及应用场景 浏览器的缓存机制提供了可以将用户数据存储在客户端上的方式,可以利用cookie,session等跟 ...
- 缓存session,cookie,sessionStorage,localStorage的区别
https://www.cnblogs.com/cencenyue/p/7604651.html(copy) 浅谈session,cookie,sessionStorage,localStorage的 ...
- 彻底弄清楚session,cookie,sessionStorage,localStorage的区别及应用场景(面试向)
原文转载自「刘悦的技术博客」https://v3u.cn/a_id_94 客户端状态保持是一个老生常谈的问题了,归根结底追踪浏览器的用户身份及其相关数据无非就是以下四种方式:session,cooki ...
- 浏览器存储(cookie、localStorage、sessionStorage)
互联网早期浏览器是没有状态维护,这个就导致一个问题就是服务器不知道浏览器的状态,无法判断是否是同一个浏览器.这样用户登录.购物车功能都无法实现,Lou Montulli在1994年引入到web中最终纳 ...
- jquery访问浏览器本地存储cookie,localStorage和sessionStorage
前言:cookie,localStorage和sessionStorage都是浏览器本地存储数据的地方,其用法不尽相同:总结一下基本的用法. 一.cookie 定义: 存储在本地,容量最大4k,在同源 ...
- 数据存储之Web存储(sessionStorage localStorage globalStorage )
Web Storage 两个目标 提供一种在cookie之外的存储会话守数据的途径 提供一种存储大量可以跨会话存在的数据机制 最初的Web Storage规范包含两个对象 sessionStorage ...
- 客户端数据存储cookie、localStoeage、sessionStorage(小记)
一.数据存储分为客户端存储和服务端存储 1.而对于客户端存储,在html5以前只能通过cookie来实现:html 5以后增加了web存储(实际保存本地)的功能 (1)对于web存储有两个标准: ...
- cookie sessionStorage localStorage 区别
sessionStorage 和 localStorage 是HTML5 Web Storage API 提供的,可以方便的在web请求之间保存数据.有了本地数据,就可以避免数据在浏览器和服务器间不必 ...
- 本地存储 cookie,session,localstorage( 一)基本概念及原生API
http://www.w3school.com.cn/html5/html_5_webstorage.asp http://adamed.iteye.com/blog/1698740 localSto ...
随机推荐
- vue中项目如何引入sass (vue-cli项目)
1.进入项目目录 2.安装sass的依赖 npm install --save-dev sass-loader npm install --save-dev node-sass 3.在build文件夹 ...
- 003-awk 命令使用
awk 命令使用 截取符合条件的列 awk 先读取第一行后,再去处理数据 例子: cut 不能截取分隔符为空格,tab之类的文件或字符串,但awk可以 [root@zabbix lianxi]# df ...
- PAT Advanced 1031 Hello World for U (20 分)
Given any string of N (≥) characters, you are asked to form the characters into the shape of U. For ...
- u-boot-2016.09 make编译过程分析(二)
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明.本文链接:https://blog.csdn.net/guyongqiangx/article/ ...
- Centos7.5源码安装nginx-1.16.0
安装nginx的依赖包(pcre-devel openssl-devel) yum install -y gcc gcc-c++ make pcre pcre-devel zlib zlib-deve ...
- 什么是UAT
基本概念 UAT,英文User Acceptance Test的简写,也就是用户验收测试,或用户可接受测试,系统开发生命周期方法论的一个阶段,这时相关的用户或独立测试人员根据测试计划和结果对系统进行测 ...
- bzoj4025 二分图 LCT + 最小生成树
题目传送门 https://lydsy.com/JudgeOnline/problem.php?id=4025 题解 貌似这道题有一个非常简单的做法是线段树分治+并查集. 可是我是为了练 LCT 来做 ...
- oracle中用case when查询列表
查询sql语句如下 SELECT * FROM ( SELECT * ,ROW_NUMBER() OVER ( PARTITION BY scene_code ORDER BY (CASE statu ...
- Mybatis(三)MyBatis 动态SQL
在 MyBatis 3 之前的版本中,使用动态 SQL 需要学习和了解非常多的标签,现在 MyBatis 采用了功能强大的 OGNL( Object-Graph Navigation Language ...
- 未能写入输出文件“c:\Windows\Microsoft.NET\Framework64\v4.0.30319\Temporary ASP.NET Files\......”--“拒绝访问。 ”错误
1.通常的解决方法:原因是由于系统目录下的Temp目录无相应的权限所致,具体操作如下: C:\Windows\temp-->属性-->安全-->编辑-->添加NETWORK S ...