详解浏览器储存小白攻略_储存使用帮助

引言随着对前端的了解越来越深入,了解到了很多种浏览器的存储方案,如 Cookie、LocalStorage等,哪这些存储方案有何异同,分别的适用场景又是什么呢。CookieCookie的来源Cookie 被创造出来的本意并不是本地储存,而是为了辨别用户身份。众所周知,Http 协议是无状态的,也就是说你每一次发送给服务器的请求对于服务器来说都是孤立的,服务器

详解浏览器储存小白攻略

引言

随着对前端的了解越来越深入,了解到了很多种浏览器的存储方案,如 Cookie、LocalStorage等,哪这些存储方案有何异同,分别的适用场景又是什么呢。

详解浏览器储存小白攻略_储存使用帮助

Cookie

Cookie的来源

Cookie 被创造出来的本意并不是本地储存,而是为了辨别用户身份。众所周知,Http 协议是无状态的,也就是说你每一次发送给服务器的请求对于服务器来说都是孤立的,服务器不知道这这些请求来自于谁。比如你向购物车里面添加了一些商品,但是当发送结账请求的时候服务器懵了,我怎么知道你是谁,你买了什么呢。而使用 Cookie 之后,服务器就可以通过查看 Cookie 来判断发送用户,一定程度上 Cookies 可以说是请求的身份证。可以告诉服务器请求发送自谁。

Cookie是什么

百闻不如一见,直接来看看 Cookie 长啥样
详解浏览器储存小白攻略_储存使用帮助

这是百度首页使用的 Cookie ,如你所见,Cookie 是以 Name-Value 键值对储存在浏览器中的,其中 Value 又是明显经过了加密的数据。

Cookie生成方式

Cookie 是所属于域名的,还是百度首页的 Cookie,通过 Domain 属性可以得知前两个 Cookie 是属于 .baidu.com 的

详解浏览器储存小白攻略_储存使用帮助

每个域名只能设置与访问到自己域名下的 Cookie,比如 baidu.com 无法访问 Domain 为 sougou.com 的 Cookie。但是子域名可以读取父域名设置的Cookie,比如截图中 www.baidu.com 就读取到了 Domain=’.baidu.com’ 的Cookie,通过手动设置 Domain 可以设置父域名的 Cookie,比如 www.baidu.com 可以设置 Domain=’baidu.com’ 这样 *.baidu.com 所有二级域名也能读取到它设置的 Cookie

//www.baidu.com

document.cookie='age=20;domain=.baidu.com'

// 此时 所有二级域名可以直接读取到这个 Cookie

Cookie的生成方式分为 服务器端生成和浏览器端生成。

  • 服务器端-通过设置 http response header中的set-cookie

我们可以通过响应头里的 Set-Cookie 指定要存储的 Cookie 值。当请求返回浏览器的时候浏览器就会按照 header 中的 set-cookie 值设置 Cookie。默认情况下,Domain 被设置为设置 Cookie 页面的主机名,当然我们也可以手动设置 Domain 的值。

Set-Cookie: id=a3fWa;
  • 浏览器端- js中可以通过document.cookie可以读写cookie,以键值对的形式展示

document.cookie="id=a3fWa"

document.cookie='age=20;domain=.baidu.com'

Cookie的应用场景

既然 Cookie 的作用就是告诉服务器请求来自于谁,那么最主要的作用就是保持用户登陆态(记住密码),除此之外还可以记录用户浏览数据,进行广告推送和前文提到的购物车等。

Cookie的缺点

缺点其实在前文中就很显而易见了

  • 不够大

Cookie 会随着每一次请求发送,这就注定了 Cookie 必定会有严格的大小限制,每一个 Cookie 的大小被限制在了 4kb,值得注意的是 4kb 指的是一个 Name-Value 的大小,而并不是说这个域名可以设置的 Cookie 总大小只有 4kb

  • 性能缺陷

Cookie 是跟随着域名的,会随着每一个同域名请求发送,但是其实很大一部分请求,比如说图片等静态资源的请求是完全用不着 Cookie 的,虽然每个Cookie只有 4kb 但是积少成多也会带来巨大的资源浪费。

我们可以把静态资源放到 CDN 上去,这时候图片域名就和主站域名不相同了,就不会附带发送 Cookie

  • 不够安全

正如上文直接打开控制台就可以看到 Cookie 一样,Cookie 虽然通过编码进行了加密,但在 Http 传输中是明文传输,脚本也可以很轻松的获取到 Cookie,非常容易被破解。

在服务器端设置 Cookie 的时候附带上 HttpOnly 标记,这样在浏览器端就无法使用 document.cookie 访问到这个 Cookie 了

Set-Cookie: id=a3fWa; HttpOnly

标记为 Secure 的 Cookie 只应通过 Https 协议加密过的请求发送,但是即便如此也不应该使用 Cookie 储存敏感信息,因为 Cookie 有其固有的不安全性,这两个标记也无法提供确切的安全保障。

解决方法

既然 Cookie 有这么多缺点,有没有什么一劳永逸的解决方法呢,那就是「专业的人做专业的事」。

用户登录态和部分用户信息的存储的工作交给 Seesion —即 Cookie 只用来储存一个用户唯一标识符,真正信息储存在服务器端,使用 Cookie 作为 SeesionID 去服务器查找信息,这样一来 Cookie 的容量限制,安全问题都引刃而解了,因为此时 Cookie 里面就是一串无意义的随机码。

本地储存得工作交由 HTML5 中新增本地存储的解决方案 「Web Storage」 ,它又分成两类 :localStorage 和 SessionStorage ,接下来就介绍这两兄弟。

LocalStorage

特点

  • 数据长时间保存,直到手动删除为止
  • 大小约为 5M
  • 和 Cookie 一样,一个网站只能访问和操作自己网站域名下的数据
  • 仅在客户端使用,和服务端无通信
  • 接口封装较好
  • 使用键值对保存信息
  • 同源窗口都可以访问

使用示例

LocalStorage 使用非常方便:

// 设置数据
localStorage.setItem("key","value");
//读取数据
let valueLocal = localStorage.getItem("key");

使用场景

通过上面那些特性就可以看出 LocalStorage 非常适合用来做本地缓存,可以提高首屏加载速度。一些图片等不会经常改变的大资源也可以缓存下来,减少网络请求。

SeesionStorage

特点

  • 保存时间为本次会话,也就是说窗口关闭就没了
  • 仅本窗口可以访问,同源的其他窗口都不行
  • 大小约为 5M

使用场景

sessionStorage 更适合用来存储生命周期和它同步的会话级别的信息。这些信息只适用于当前会话,比如可以用来做表单数据的持久化,防止刷新后表单数据丢失

Cookie、LocalStorage 和SessionStorage 之间的区别

作用域的不同

这三者都遵循协议,即同协议,同域名,同端口下才能访问和修改同一份数据,唯一不同的就是 SeesionStorage 还要求在同一窗口。

生命周期的不同

  • Cookie 可以手动设置过期时间,默认就是本次会话时长,随着窗口关闭而删除,当设置了过期时间时候,就会被储存到硬盘中直到过期时间才被删除
  • LocalStorage 是持久化的本地储存,除非你手动删除,否则会一直存在
  • SessionStorage 是会话级别的存储,也是随着窗口关闭而删除。

总结

这就是几种浏览器存储方案,当然还有我们应该根据不同方案各自的特点决定什么时候使用什么方案,适合的才是最好的。总结一下本文的几个重点

  • Cookie 的本职工作并非本地存储,而是“维持状态”
  • Web Storage 是 HTML5 专门为浏览器存储而提供的数据存储机制,不与服务端发生通信
海计划公众号
(0)
上一篇 2020/03/22 08:49
下一篇 2020/03/22 08:49

您可能感兴趣的内容

  • xml文件中的XPATH、DTD菜鸟教程下载_xml入门百科

    一、先来说说XPATH1、XPATH 概念XPath 是一门在 XML 文档中查找信息的语言,可用来在 XML 文档中对元素和属性进行遍历。XPath 是 W3C XSLT 标准的主要元素,并且 XQuery 和 XPointer 同时被构建于 XPath 表达之上。因此,对 XPath 的理解是很多高级 XML 应用的基础。XPath 非常类似对数据库操作

    2020/03/26
  • 如何把自己包装成程序员大佬?这里有一份「装X指南」基础入门_程序员入门百科

    你也许还未入行,或是刚入行或工作了几年的程序员,但有时候,你可能会希望别人认为你很强,是个天才,就像电影里那种一手抱妹子一手拿香槟,用脚写代码攻破军方网站的炫酷黑客。可能有些夸张,但 Sten Sootla 觉得你可以做到。Sten Sootla 是机器人初创公司 StarshipTechnologies 的机器学习工程师,本文就是他发布的将自己伪装成大牛程

    2020/03/23
  • Logo Faves小白知识_一款LOGO 设计欣赏的网站

    Logo Faves小白知识 官方网址:http://logofaves.com/ 简介描述:一款LOGO 设计欣赏的网站 Logo Faves – Creative …

    2020/03/06
  • Web 前端矢量小图标的使用方法入门指南_图标入门基础教程

    前言在写前端页面时,我们经常会用到一些小图标之类的图片,如果使用图片的话代码写起来比较麻烦,最近发现一个方便实用的方法,直接引用就可以了。 一、引入图片操作方法首先我们输入网址:https://www.iconfont.cn/ 可以百度搜索:阿里巴巴矢量图,就会出来这个网址
    以下我推荐两种比较常用也是比较方便的方法。方法1:font-class

    2020/03/22
  • JavaScript函数式编程指南攻略_编程指南教程

    1:基本概念函数式编程是一种编程思维方式,并不是一些语法规则,对于复用性高的功能代码进行一定的函数封装,实现了代码的高可复用性(主要目的)。函数式编程的特点:函数是第一等公民,因为叫函数式编程,因此函数的地位是最高的,也就是说比起变量函数的地位更高一点。只用表达式而不用语句,表达式就是声明式的意思,语句就是命令式的,尽量使用表达式或者是声明式的代码来组织逻辑

    2020/03/26
  • WebODM使用教程_从无人机图像生成地图,点云,纹理三维模型

    WebODM使用教程 官方网址:https://www.opendronemap.org/webodm/ GitHub:https://github.com/OpenDroneMa…

    2020/03/10
  • SEO优化中四种链接的重要性零基础入门_seo基础教程

    SEO优化中以下四种链接的重要性,下面就让小编来解说一下吧。1.网站内链网站内链在SEO优化的过程中很少说到,这是因为在网站建造的阶段,基本上定性了,有了固定的模板。例如,我们更新网站的内容时,它实际上就在网站内链的构建。每增加一个内容,就意味着一个内链的构成,一些文章会在底部增加相关内容,或许在文章中增加关键词链接,尽管能够 增加网站的内链,但也有一点,它

    2020/03/30
  • 纯 JS 实现放大缩小拖拽采坑之旅小白攻略_拖拽菜鸟教程下载

    前言最近团队需要做一个智能客服悬浮窗功能,需要支持拖动、放大缩小等功能,因为这个是全局插件,为了兼容性考虑全部使用原生 JS 实现,不引用任何第三方库或者插件。开发过程中遇到的一些问题及解决方法,在这里和大家分享交流一下。注:下文出现的“采宝”二字,为这个功能的产品名。先看效果看这个效果,相信大部分开发都会觉得实现起来比较容易。在实际开发中,笔者总结了三个主

    2020/03/23
  • mixin函数混合基础入门_mixin攻略教程

    混合中定义的变量和混合是可见的,可以在调用者的作用域中使用,只有一个例外,那就是如果调用方包含一个具有相同名称的变量(其中包括由另一个mixin调用定义的变量),则不会复制变量,仅存在于调用者本地范围内的变量受到保护,而从父范围继承的变量将会被覆盖。Mixin范围由变量和混合组成的混合可以在调用者的作用域中使用,并且是可见的。Mixin和返回值mixin类似

    2020/03/23
  • 中年程序员对核心竞争力“不可替代”的重新认识使用教程_程序员入门基础

    职场新认识:观点一:过去成功的项目经验才是职场上真正不可代替的,你有成功的项目经验,能解决当前团队面临的最大问题,这个才是不可代替的;所以频繁跳槽的人通常要比在一个公司待长时间的人更有竞争力(从结果看,软件行业人才流动性高并不是中国人忠诚度不高)观点二:不可代替是暂时性的,问题解决,你的价值就已经开始下降和贬值,如果公司有新的业务要发展,而你如果没有相关经验

    2020/03/26
  • javascript对dom的操作总汇,js创建,更新,添加,删除DOM的方法入门指南_js知识小白常识

    HTML文档在浏览器解析后,会成为一种树形结构,我们需要改变它的结构,就需要通过js来对dom节点进行操作。dom节点(Node)通常对应的是一个标题,文本,或者html属性,都有一个nodeType来标示他的类型:值 nodeType名称 1 Element 元素 2 Attribute 属性 3 Text 文本nodeType表示Node的类型,它是一

    2020/04/06
  • ES6 之 对象的简写方式小白攻略_对象小白知识

    简写有两条基本原则:同名的属性可以省略不写对象中的方法中的 : function 可以省略不写来看下下面这个例子,我分别用ES5 和 ES6 的语法分别定义并声明了一个简单的学生对象:ES5:var studentES5 = {name: ‘小方哥’,age: 20,sex: ‘男’,getName: function () {return this.nam

    2020/03/30
  • vue中获取滚动table的可视页面宽度使用攻略_table零基础入门

    vue中获取滚动table的可视页面宽度,调整表头与列对齐(每列宽度不都相同)mounted() {// 在mounted中监听表格scroll事件this.$refs.scrollTable.addEventListener( ‘scroll’,(event) => {this.adjustTable(event);});},
    ……// targe

    2020/03/26
  • js中Date的构造函数解读基础教程_日期小白入门

    javascript中的内置对象是我们经常会用到的,那么今天我们就来说说Date的四种构造方法吧一、new Date()这是我们最常使用也最熟悉不过的Date对象的构造方法了,通过无参数的构造函数我们可以默认获取到一个代表实例化时的Date对象var now = new Date();
    console.log(now) //Thu Sep 19 2019 1

    2020/03/26
  • Css背景定位入门基础_背景小白知识

    同一个标签可以同时设置背景颜色和背景图片,如果颜色和图片同时存在,那么图片会覆盖颜色。1.在CSS中有一个叫做background-position:属性,就是专门用来控制背景图片的位置2.格式:background-position:值1 值2;值1的取值范围:left center right值1代表背景图片的水平位置值2的取值范围:t

    2020/03/24
  • Vidage.js使用说明_HTML5 全屏背景视频特效插件

    Vidage.js使用说明 官方网址:https://dvlden.github.io/vidage/ GitHub:https://github.com/dvlden/vidag…

    2020/03/06