cookie

Cookie 是一些数据,由服务器生成,发送给浏览器,一旦用户从该网站或服务器退出,Cookie 就存储在用户本地的硬盘上,下一次请求同一网站时会把该cookie发送给服务器。Cookie的作用就是用于解决“如何记录客户端的用户信息”。

可以使用 document.cookie 属性来创建 、读取、及删除 cookie。

  • 创建 cookie :

    document.cookie="username=Irelia;

  • 为 cookie 添加一个过期时间(以 UTC 或 GMT 时间)。默认情况下,cookie 在浏览器关闭时删除:

    document.cookie="username=Irelia; expires=Thu, 19 Dec 2025 12:00:00 GMT";

  • path 参数告诉浏览器 cookie 的路径。默认情况下,cookie 属于当前页面。

    document.cookie="username=Irelia; expires=Thu, 19 Dec 2025 12:00:00 GMT; path=/";

Cookie的缺陷

  • cookie会被附加在每个HTTP请求中,所以无形中增加了流量。

  • 由于在HTTP请求中的cookie是明文传递的,所以安全性成问题。(除非用HTTPS)

  • Cookie的大小不能超过4kb。对于复杂的存储需求来说是不够用的。

MDN链接:https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/API/cookies

sessionStorage

这个数据本质是存储在当前页面的内存中,为页面会话期间可用的每个给定源维护一个单独的存储区域(只要浏览器处于打开状态,包括页面重新加载和恢复)

  • 仅为会话存储数据,这意味着在关闭浏览器(或选项卡)之前存储数据。

  • 数据永远不会传输到服务器。

  • 存储限制大于cookie(最多5MB)。

方法:

  • setItem(key ,value):存储数据,以键值对的方式存储

  • getItem(key):获取数据,通过指定名称的key获取对应的value值

  • removeItem(key):删除数据,通过指定名称key删除对应的值

  • clear() :清空存储的内容

loclaStorage

1.存储的内容一般为5MB

2.不同浏览器不能共享数据。但是在同一个浏览器的不同窗口中可以共享数据

3.永久生效,他的数据是存储在硬盘上,并不会随着页面或者浏览器的关闭而清除,如果想清除,必须手 动清除

方法:

  • setItem(key ,value):存储数据,以键值对的方式存储

  • getItem(key):获取数据,通过指定名称的key获取对应的value值

  • removeItem(key):删除数据,通过指定名称key删除对应的值

  • clear() :清空所有存储的内容

WebStorage

SessionStorage与LocalStorage都属于Web Storage提供的API

WebStorage的优点:

(1)存储空间更大:cookie为4KB,而WebStorage是5MB;

(2)节省网络流量:WebStorage不会传送到服务器,存储在本地的数据可以直接获取,也不会像cookie 一样美词请求都会传送到服务器,所以减少了客户端和服务器端的交互,节省了网络流量;

(3)对于那种只需要在用户浏览一组页面期间保存而关闭浏览器后就可以丢弃的数据,sessionStorage 会非常方便;

(4)快速显示:有的数据存储在WebStorage上,再加上浏览器本身的缓存。获取数据时可以从本地获取 会比从服务器端获取快得多,所以速度更快;

(5)安全性:WebStorage不会随着HTTP header发送到服务器端,所以安全性相对于cookie来说比较高 一些,不会担心截获,但是仍然存在伪造问题;

(6)WebStorage提供了一些原生方法,数据操作比cookie方便;

    

HTML5应用程序缓存

使用 HTML5,通过创建 cache manifest 文件,可以轻松地创建 web 应用的离线版本。

应用程序缓存为应用带来三个优势:

  • 离线浏览 - 用户可在应用离线时使用它们

  • 速度 - 已缓存资源加载得更快

  • 减少服务器负载 - 浏览器将只从服务器下载更新过或更改过的资源。

如果你还想对HTML5应用程序缓存有更多的了解,可以看看这个https://www.w3school.com.cn/html5/html_5_app_cache.asp

cookie,sessionStorage,loclaStorage,HTML5应用程序缓存的更多相关文章

  1. HTML5应用程序缓存实现离线Web网页或应用

    HTML5应用程序缓存和浏览器缓存的区别.(有些)浏览器会主动保存自己的缓存文件以加快网站加载速度.但是要实现浏览器缓存必须要满足一个前提,那就是网络必须要保持连接.如果网络没有连接,即使浏览器启用了 ...

  2. HTML5: HTML5 应用程序缓存

    ylbtech-HTML5: HTML5 应用程序缓存 1.返回顶部 1. HTML5 应用程序缓存 使用 HTML5,通过创建 cache manifest 文件,可以轻松地创建 web 应用的离线 ...

  3. HTML5应用程序缓存Application Cache

    什么是Application Cache HTML5引入了应用程序缓存技术,意味着web应用可进行缓存,并在没有网络的情况下使用,通过创建cache manifest文件,可以轻松的创建离线应用. A ...

  4. HTML5应用程序缓存Application Cache详解

    什么是Application Cache HTML5引入了应用程序缓存技术,意味着web应用可进行缓存,并在没有网络的情况下使用,通过创建cache manifest文件,可以轻松的创建离线应用. A ...

  5. HTML5应用程序缓存Application Cache详解.RP

    什么是Application Cache HTML5引入了应用程序缓存技术,意味着web应用可进行缓存,并在没有网络的情况下使用,通过创建cache manifest文件,可以轻松的创建离线应用. A ...

  6. HTML5应用程序缓存Application Cache.RP

    什么是Application Cache HTML5引入了应用程序缓存技术,意味着web应用可进行缓存,并在没有网络的情况下使用,通过创建cache manifest文件,可以轻松的创建离线应用. A ...

  7. 【HTML5】浅析HTML5应用程序缓存(ApplicationCache)

    一.为什么需要Web应用程序缓存 在移动互联网时代,设备终端位置不再固定,依赖无线信号,网络的可靠性变得降低,比如坐在火车上,过了一个隧道(15分钟),便无法访问网站,这对于web的伤害是很大的    ...

  8. html5—— 应用程序缓存

    使用 HTML5,通过创建 cache manifest 文件,可以轻松地创建 web 应用的离线版本. 什么是应用程序缓存(Application Cache)? HTML5 引入了应用程序缓存,这 ...

  9. HTML5之appcache语法理解/HTML5应用程序缓存/manifest缓存文件官方用法翻译

    习惯性的贴几个参考链接: W3School-HTML 5 应用程序缓存 官方 MDN window.applicationCache 接口文档 官方 MDN 用法示例 看所有的教程不如直接看最原始的官 ...

随机推荐

  1. webpack 打包html文件

    webpack 打包html文件 webpack.config.js配置文件内容为: /** * loader: 1. 下载 2. 使用(配置) * plugins:1. 下载 2. 引入 3.使用 ...

  2. 在同级路径下,SpringBoot两种类型的配置文件(.properties/.yml)同时存在时,配置优先级如何处理?

    两类配置文件如果同时存在,若 key 相同则 properties 优先级高,若key不同则合并加载:

  3. [atAGC054C]Roughly Sorted

    考虑对于确定的排列$\{p_{i}\}$,如何求出其(交换后)会得到的排列-- 令$cnt_{x}$为在$i$之前比$x$大的元素个数(其中$p_{i}=x$),显然排列合法当且仅当$cnt_{i}\ ...

  4. [loj3048]异或粽子

    先对其求出前缀异或和,然后$o(k)$次枚举,每次选择最大值,考虑如何维护可以全局开一个堆,维护出每一个点的最大值的最大值,那么相当于要在一个点中删去一个点再找到最大值将这些删去的点重新建成一颗tri ...

  5. [bzoj1178]会议中心

    考虑用f[i][j]表示以i为起点(i是时间,所以要离散)选$2^j$条线段(这里不是时间)最小的终点,预处理用倍增的方式来求即可预处理出这个数组后,就可以很快的求出在$[l,r]$的时间内最多能选多 ...

  6. 5.基于二进制部署kubernetes(k8s)集群

    1 kubernetes组件 1.1 Kubernetes 集群图 官网集群架构图 1.2 组件及功能 1.2.1 控制组件(Control Plane Components) 控制组件对集群做出全局 ...

  7. Codeforces 1466G - Song of the Sirens(哈希)

    Codeforces 题面传送门 & 洛谷题面传送门 事实证明,有的难度评分不算很高.涉及的知识点不算很难的题目也能出得非常神仙 首先考虑如何暴力求答案.注意到一个文本串 \(T\) 在 \( ...

  8. [转载]CSP-J/S 第一轮知识点选讲

    CSP-J/S 第一轮知识点选讲 转载自这里 感谢原博主的大力整理! 信息学史及基本知识 一.信息学及计算机史 计算机的顶级奖项:图灵奖.冯·诺依曼奖 图灵奖:由ACM(美国计算机协会)设立于1966 ...

  9. SSRF的原理和防范

    背景 最近做的安全测评主要是SSRF,发现自己在这一块有挺大知识盲点,抓紧补一下. 1.介绍 SSRF(Server-Side Request Forgery:服务器端请求伪造),是一种攻击者利用服务 ...

  10. 【Plink】Error: Multiple instances of '_' in sample ID.?

    目录 前言 原因 解决方法 方法一:修改样本名 方法二:修改--id-delim 方法三:加入--double_id或--const-fid参数 前言 将vcf转化为plink格式时,命令如下: pl ...