解决浏览器存储问题,不得不了解的cookie,localStorage和sessionStorage

浏览器存储方式

  • 一、浏览器存储的方式
  • 二、cookie、localStorage和sessionStorage
    • 1、cookie、localStorage和sessionStorage是什么?
      • (1)cookie
      • (2)localStorage
      • (3)sessionStorage
    • 2、cookie、localStorage和sessionStorage的异同点
      • (1)三者的相同点在于:
      • (2)三者的区别在于:
    • 3、cookie的用途
      • (1)保存用户登录状态
      • (2)跟踪用户行为
  • 三、session和token
      • (1)Session
      • (2)Token
  • 四、结束语

要说浏览器存储的方式,我们听到最多的莫过于就是cookie,localStorage和sessionStorage了。那这三者之前有什么区别,cookie与session、sessionId又有什么关系呢?接下来我们一起来了解一下吧!

一、浏览器存储的方式

特性cookielocalStoragesessionStorageindexedDB
数据生命周期一般由服务器生成,可以设置过期时间除非被清理,否则一直存在页面关闭就清理除非被清理,否则一直存在
数据存储大小4K5M5M无限
与服务端通信每次都会携带在header中,对于请求性能有一定影响不参与不参与不参与

补充cookie 原本并不是用来储存的,而是用来与服务端通信的,需要存取请自行封装 api

localStorage 则自带 getItemsetItem 方法,使用很方便。

localStorage 注意点:

  • localStorage 只能存字符串,存取 JSON 数据需配合 JSON.stringify()JSON.parse()

  • 遇上禁用 setItem 的浏览器,需要使用 try...catch 捕获异常。

二、cookie、localStorage和sessionStorage

1、cookie、localStorage和sessionStorage是什么?

(1)cookie

  • cookie 是一个非常具体的东西,指的就是浏览器里面能永久存储的一种数据,仅仅是浏览器实现的一种数据存储功能。

  • cookie 由服务器生成,发送给浏览器,浏览器把 cookiekv的形式保存到某个目录下的文本文件内,下一次请求同一网站时会把该 cookie 发送给服务器。

  • cookie 的过期时间由客户端设置。若不设置过期时间,则表示这个 cookie 的生命期为浏览器会话期间,关闭浏览器窗口, cookie 就会消失。这种生命期为浏览器会话期的 cookie 被称为会话cookie如果设置了过期时间,则在设置的 cookie 过期时间之前一直有效,即使窗口或浏览器关闭也会一直有效。

  • 会话cookie一般不存储在硬盘而是保存在内存里,当然这个行为并不是规范规定的。若设置了过期时间,浏览器就会把cookie保存到硬盘上,关闭后再打开浏览器后这些 cookie 仍然有效直到超过设定的过期时间。对于保存在内存里的 cookie ,不同的浏览器有不同的处理方式。

  • 可用 document.cookie = "" 来设置 cookie 的值。cookie的值是键值对的形式存在,当设置的键一样时,会覆盖掉原先的值。当键不一样时,对进行叠加操作。这里附上一篇我看过觉得比较好理解的关于如何设置cookie的文章,大家可以根据自身需求进行查看~

(2)localStorage

  • 始终有效,窗口或浏览器关闭也一直保存,因此用作持久数据;
  • 同源窗口都会共享,并且不会失效,不管窗口或者浏览器关闭与否都会始终生效。

(3)sessionStorage

  • 浏览器存储的一种形式。

  • 仅在当前浏览器窗口关闭前有效,不可能持久保持。

  • 在相同浏览器里,如果是在当前页面里面跳转进入一个新的页面,可以共享;而如果是直接打开一个新的页面,不能共享。

2、cookie、localStorage和sessionStorage的异同点

(1)三者的相同点在于:

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

(2)三者的区别在于:

  • 与服务器通信不同:

    cookie 数据始终在同源的 http 请求中携带(即使不需要),即 cookie 在浏览器和服务器间来回传递,而sessionStorage和localStorage不会自动把数据发送给服务器,仅在本地保存;

    cookie 随着 http 请求被发送出去,而 loacalStoragesessionStorage 不会随着 http 请求被发送出去。

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

  • 存储大小限制也不同:

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

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

  • 数据有效期不同:

    sessionStorage :仅在当前浏览器窗口关闭之前有效;

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

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

  • 作用域不同:

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

    localstoragecookie所有同源窗口中都是共享的

3、cookie的用途

(1)保存用户登录状态

例如将用户 id 存储于一个 cookie 内,这样当用户下次访问该页面 时就不需要重新登录了,现在很多论坛和社区都提供这样的功能。

cookie 还可以设置过期时间,当超过时间期限后,cookie 就会自动消失。因此,系统往往可以提示用户保持登录状态的时间:常见选项有一个月、三个 月、一年等

(2)跟踪用户行为

例如一个天气预报网站,能够根据用户选择的地区显示当地的天气情况。 如果每次都需要选择所在地是繁琐的,当利用了 cookie 后就会显得很人性化了,系统能够记住上一次访问的地区,当下次再打开该页面时,它就会自动显示上次用户所在地区 的天气情况。

因为一切都是在后台完成,所以这样的页面就像为某个用户所定制的一样,使用起来非常方便定制页面。如果网站提供了换肤或更换布局的功能,那么可以使用 cookie 来记录用户的选项,例如:背景色、分辨率等。当用户下次访问时,仍然可以保存上一次访问的界面风格。

三、session和token

(1)Session

举个例子:

  • session 从字面上讲,就是会话。这个就类似于你和一个人交谈,你怎么知道当前和你交谈的是张三而不是李四呢?对方肯定有某种特征(长相、身高等等)表明他就是张三。
  • session 也是类似的道理,服务器要知道当前发请求给自己的是谁。
  • 为了做这种区分,服务器就要给每个客户端分配不同的“身份标识”,这个身份表示也就是我们平常所说的 sessionId 。然后客户端每次向服务器发请求的时候,都带上这个“身份标识”,服务器就知道这个请求来自于谁了。
  • 至于客户端怎么保存这个“身份标识”,可以有很多种方式,对于浏览器客户端,大部分情况下都默认采用 cookie 的方式,当然也可以使用 localStoragesessionStorage 存储这个身份标识,大家可以依据自身需求进行使用。
  • 需要注意的是, session 为一个会话,当页面不同即使是同一页面打开两次,也被视为同一次会话。
  • 服务器使用 session 把用户的信息临时保存在了服务器上,用户离开网站后 session 会被销毁。
  • 这种用户信息存储方式相对 cookie 来说更安全,但是 session 有一个缺陷:如果web服务器做了负载均衡,那么下一个操作请求到了另一台服务器的时候 session 会丢失。

综上所述,对session做个总结:

  • 当程序需要为某个客户端的请求创建一个 session 时,服务器首先检查这个客户端的请求里是否已包含了一个 session 标识( 称为 sessionId ),如果已包含则说明以前已经为此客户端创建过 session ,服务器就按照此 sessionId 把其对应的 session 检索出来使用(检索不到,会新建一个);反之,如果客户端请求不包含 sessionId ,则为客户端创建一个 session 并且生成一个与此 session 相关联的 sessionIdsessionId 的值应该是一个既不会重复,又不容易被找到规律以仿造的字符串,这个 sessionId 将被在本次响应中返回给客户端保存。保存这个 sessionId 的方式可以采用 cookie ,也可以是 locaStoragesessionStorage ,这样在交互过程中浏览器可以自动的按照规则把这个标识发送给服务器。

(2)Token

  • 在Web领域基于 Token 的身份验证随处可见。在大多数使用 Web API 的互联网公司中, token多用户下处理认证的最佳方式

  • 以下几点特性会让你在程序中使用基于 Token 的身份验证:

    • 无状态、可扩展;
    • 支持移动设备;
    • 跨程序调用;
    • 安全。
  • 大部分你见到过的 APIWeb 应用都使用 token 。例如 Facebook , Twitter , Google , GitHub 等。

四、结束语

cookie、loacalStorage和sessionStorage是面试中老生常谈的问题了。在学习的过程中,要理解好cookie、localStorage和sessionStorage的关系,以及session、sessionId和cookie的关系,只有把它们这几个之间的关系弄明白了,自己才不会一直深陷在一个关系杂圈中。

关于浏览器存储的内容就讲到这里啦!如有疑问或文章有讲的不好的地方欢迎评论区评论或私信我交流~

  • 关注公众号 星期一研究室 ,不定期分享学习干货

  • 如果这篇文章对你有用,记得点个赞加个关注再走哦~

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/308026.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

使用Seq搭建免费的日志服务

Seq简介Seq是老外开发的一个针对.NET平台非常友好的日志服务。支持容器部署,提供一个单用户免费的开发版本。官网:https://datalust.co/seq使用文档:https://docs.datalust.co/docsSeq主体功能如下所示:支持主流的编程语言&#x…

leetcode27:移除元素(暴力+双指针)

一:题目 二:暴力双指针 1:暴力解法 (1):思路 1.在数组当中 我们想要删除一个元素 得靠覆盖也就是后面的元素往前覆盖其想要删除的元素 但是注意的是我们真实的数组中的元素个数是不变的 因为我们只是将后面的元素移到起前面 并未真正的删除…

三分钟Docker-推送本地镜像到仓库

在上篇文章中,我们完成了应用程序容器化,把webapi项目构建镜像并容器化运行。本文将会演示如何把自己构建的镜像上传到docker官网的仓库和自己私有仓库本地镜像推送到官网的registry1.创建仓库点击Docker Desktop图标->Repositories-》create 跳转到…

你知道304吗?图解强缓存和协商缓存

http协议—常见状态码,请求方法,http头部,http缓存一、http状态码1、引例阐述2、状态码分类3、常见状态码4、关于协议和规范二、http 方法1、传统的methods2、现在的methods3、Restful API(1)Restful API是什么&#x…

leetcode844. 比较含退格的字符串(栈+双指针)

一:题目 二:思路代码 1:利用栈 (1):思路 1.利用栈 我们将字符串中的单个元素都入栈 当遇到’#的时候将将栈顶元素弹出 (2):上码(方法一) class Solution { public:/**思路:1.利用栈 我们将字符串中的单个元素都入栈 当遇到#的时候将将栈顶元素弹出*…

efcore技巧贴-也许有你不知道的使用技巧

前言.net 环境近些年也算是稳步发展。在开发的过程中,与数据库打交道是必不可少的。早期的开发者都是DbHelper一撸到底,到现在的各种各样的ORM框架大行其道。孰优孰劣谁也说不清楚,文无第一武无第二说的就是这个理。没有什么最好的&#xff0…

关于前端性能优化问题,认识网页加载过程和防抖节流

前端性能优化—网页加载过程、性能优化方法、防抖和节流一、网页加载过程1、加载资源的形式2、加载资源的过程3、渲染页面的过程4、关于window.onload 和 DOMContentLoaded二、性能优化1、性能优化原则2、性能优化的方法3、让加载更快4、让渲染更快三、防抖和节流1、防抖 debou…

javax.net.ssl.SSLHandshakeException: No appropriate protocol

一:报错 二:解决 找到jdk 1.8安装目录,找到C:\Program Files\Java\jre里面的lib\security 下面有个java.security将jdk.tls.disabledAlgorithms后面的SSLv3, TLSv1, TLSv1.1都删除掉.(大概位置是在700多行) 三:上方并未解决的 我的jdk是这…

『软件工程9』结构化系统分析——解决软件“做什么”问题

结构化系统分析——解决软件“做什么”问题一、系统分析的任务和过程1、系统分析的任务2、系统分析的过程(1)问题识别(2)分析与综合(3)编制文档(4)系统分析评审二、结构化分析方法1、…

.NET5.0 Preview 8 开箱教程

.NET5.0 Preview 8 开箱教程前言首先,看到 .NET5.0 Preview 8 发布后,作为一枚基层应用开发人员,很想要体验一下新版本的魅力;这可能就是程序员对新技术的一种执着吧。其实从官方宣布 .NETCore 将更名为 .NET5 开始,我…

leetcode977. 有序数组的平方(暴力+双指针)

一:题目 二:暴力双指针 1:暴力 class Solution { public:vector<int> sortedSquares(vector<int>& nums) {vector<int> v;for(int num : nums){int temp pow(num,2);v.push_back(temp);} sort(v.begin(),v.end());return v;} };2:双指针 思路:1.利…

『软件工程10』结构化系统分析:数据流图和字典案例分析

结构化系统分析——数据流图和数据字典案例分析一、数据流图案例分析1、案例1&#xff1a;商店业务管理系统2、案例2&#xff1a;学籍管理系统3、案例3&#xff1a;大型企业数据中心二、数据字典案例分析1、案例1&#xff1a;学籍管理系统三、写在最后接 上一篇文章的内容&…

MongoDB最新4.2.7版本三分片集群修改IP实操演练

背景重新组网&#xff0c;需要对现有MongoDB分片集群服务器的IP进行更改&#xff0c;因此也需要对MongoDB分片集群的IP也进行相应的更新&#xff0c;而MongoDB分片集群的IP修改不能单纯的通过配置来进行&#xff0c;需要一番折腾后才能正常更新&#xff0c;这里对整个MongoDB集…

浅谈Web前端安全策略xss和csrf,及又该如何预防?

Web前端安全策略xss和csrf的攻击和防御一、XSS跨站请求攻击1、什么是XSS2、场景模拟3、XSS的攻击类型4、如何防御XSS二、XSRF跨站请求伪造1、什么是csrf2、场景模拟&#xff08;1&#xff09;场景一&#xff08;2&#xff09;场景二3、CSRF的特点4、CSRF攻击方式5、CSRF常见的攻…

leetcode209. 长度最小的子数组(暴力+滑动窗口)

一:题目 二:暴力滑动窗口 1:暴力解法 class Solution { public:int min (int a ,int b){return a < b ? a : b;}int minSubArrayLen(int target, vector<int>& nums) {int minx 100001;for(int i 0; i < nums.size(); i){vector<int> v;int sum nu…

做权限认证,还不了解IdentityServer4?不二话,赶紧拥抱吧,.NET Core官方推荐!...

目前大多数的应用程序或多或少看起来是上图所示这样的&#xff0c;最常见的交互场景有&#xff08;浏览器与Web应用程序、Web应用程序与WebApi通讯、本地应用程序狱WebApi通讯、基于浏览器的应用程序与WebApi 通讯、基本服务器的应用程序与WebApi通讯、WebApi与WebApi通讯&…

leetcode 904:水果成篮(滑动窗口)

一:题目 二:思路 1.用两个篮子装进两个数&#xff0c;后面只能装入这两个相同的数,并统计个数;如果遇到其他数,则重新开始计数&#xff0c; 这里的重新开始计数指的是在去除第一个篮子中所装进的数 2.滑动窗口来做 滑动窗口的起始位置为:数组的起始位置 滑动体为 统计的个数 滑…

真・WPF 按钮拖动和调整大小

真・WPF 按钮拖动和调整大小独立观察员 2020 年 8 月 29 日手头有个 Winform 程序&#xff0c;是使用动态生成按钮&#xff0c;然后拖动、调整大小&#xff0c;以此来记录一些坐标数据&#xff0c;最后保存坐标数据的。在数据量&#xff08;按钮数量&#xff09;比较小的时候是…

『软件工程11』结构化系统设计:解决软件“怎么做”问题

结构化系统设计——解决软件“做什么”问题一、设计的目标和任务1、目标2、任务3、开发阶段的信息流4、软件设计的重要性5、软件设计的技术观点和管理观点二、设计基础1、结构图&#xff08;体系结构图、模块结构图&#xff09;&#xff08;1&#xff09;分析结构图三者间的关系…

map容器中删除一个元素(value)

一:问题描述 我们想要删除map容器中&#xff0c;一个key值对应的vlaue 二&#xff1a;上码 #include<iostream> #include<map> #include<vector> using namespace std; int main(){map<int,int> m;for(int i 0; i < 4; i){m[i] i1;}//正常输出 …