存储界的cookie、本地存储、会话存储

简介: 存储界的cookie、本地存储、会话存储

@[toc]

cookie、本地存储、会话存储三者均可以存储数据,存储的时效性有区别

一、cookie

1、是什么

所谓“cookie”数据是指某些网站为了辨别用户身份,储存在用户本地终端上的数据(通常经过加密),由用户客户端计算机暂时或永久保存的信息。

2、cookie的构成

cookie 作为用户登录时的一种状态信息,Cookie是保存在客户端的纯文本文件。比如txt文件。所谓的客户端就是我们自己的本地电脑。当我们使用自己的电脑通过浏览器进行访问网页的时候,服务器就会生成一个证书并返回给我的浏览器并写入我们的本地电脑。这个证书就是cookie。一般来说cookie都是服务器端写入客户端的纯文本文件。
原理:web服务器通过在http响应消息头增加Set-Cookie响应头字段将Cookie信息发送给浏览器,浏览器则通过在http请求消息中增加Cookie请求头字段将Cookie回传给web服务器。

在这里插入图片描述
名称 | Value
-------- | -----
名称 name |一个唯一确定cookie的名称
值value | 存储在cookie中的字符串
域domain:cookie | cookie对于哪个域是有效的
路径 path | 指定域中的指定路径
失效时间 expires | cookie何时应该被删除的时间戳
max-age | 与expires作用相同,用来告诉浏览器此cookie多久过期(单位是秒),而不是一个固定的时间点。正常情况下,max-age的优先级高于expires。
HttpOnly | 告知浏览器不允许通过脚本document.cookie去更改这个值,同样这个值在document.cookie中也不可见。但在http请求仍然会携带这个cookie。注意这个值虽然在脚本中不可获取,但仍然在浏览器安装目录中以文件形式存在。这项设置通常在服务器端设置。
安全标志secure | 指定后,cookie只有在使用SSL连接时才发送到服务器(设置secure标准)

3、cookie 的工作原理

话不多说。先上一张图帮助大家理解cookie 。以登录gitHub仓库为例

在这里插入图片描述

原理如下:

cookie
在这里插入图片描述

问:当我们把浏览器种的cookie信息复制到另一个浏览器中保存进行访问,是不是也可以不用登录直接访问,那这个时候就需要用到cookie劫持

4、cookie的限制

绑定在特定域名下,无法跨越

浏览器对cookie数量的限制规定不同(例如FF规定每个域名最多50个,二Safari和chrome没有数量限制)

所有cookie的累加长度限制为4KB,超长会被忽略
名称 | Value
-------- | -----
JS中的cookie |document.cookie
获取 | 返回当前页面可用的所有cookie的字符串,由分号和空格隔开的一系列名值对(name1 = value1; name2 = value2;)
添加 | cookie的值必须写成key = value的形式,且等号两边不能有空格写入时必须对分号,逗号和空格进行转义(encodeURLComponent()方法)一次只能写入一个cookie,并且写入不是覆盖,而是添加

  • 会话cookie是指在不设定它的生命周期 expires 时的状态,前面说了,浏览器的开启到关闭就是一次会话,当关闭浏览器时,会话cookie就会跟随浏览器而销毁。当关闭一个页面时,不影响会话cookie的销毁。

5、cookie的属性

(除了cookie本身的内容,还有部分可选属性可以被写入,必须都以分号开头)

名称 Value
value 必需项,用于指定cookie的值
expires 指定cookie过期时间,也指cookie的周期
domain 指定cookie所在域名(只有访问的域名匹配domain属性,cookie才会发送到服务器)
path属性 指定路径,必须是绝对路径
secure 指定cookie只能在加密协议https下发送到服务器
httpOnly 设置该cookie不能被JS读取

二、localStorage(本地存储)

本地存储,在HTML5中,加入了一个localStorage特性,这个特性主要是用来作为本地存储来使用的,解决了cookie存储空间不足的问题(cookie中每条cookie的存储空间为4k),localStorage中一般浏览器支持的是20M大小,这个在不同的浏览器中localStorage会有所不同。它只能存储字符串格式的数据,所以最好在每次存储时把数据转换成json格式,取出的时候再转换回来。数据没有过期时间。

  1. 生命周期永久有效,除非手动删除,否则关闭页面也会存在
  2. 可以多窗口(页面)共享(同一浏览器可以共享)
  3. 以键值对的形式存储使用
名称 Value
语法: myStorage = localStorage;返回一个Storage对象
添加: localStorage.setltem('key','value');
获取: localStorage.getItem('key'); 如果key不存在则返回null
移除: localStorage.removeItem('key'); 删除名称为“key”的信息,这个key所对应的value也会全部被删除
清空: localStorage.clear(); 不接收参数,清空存储对象里的所有数据

例:标准的json对象{“name”:“john”}

  • JSON.stringify(); // 将json格式的数据(JavaScript 对象)转换成JSON格式的字符串
    例:
var  data = {
   
   name:"john"};
data = JSON.stringify(data);
localStorage.setItem("data1",data);
  • JSON.parse(); //将JSON格式的字符串转换成JSON对象进行处理
    在这里插入图片描述
localStorage.setItem("name","john"); //设置name为john
localStorage.setItem("name","john1"); //覆盖之前的值,现在name所对应的值是john1

在这里插入图片描述

注:

  1. 各浏览器支持的localStorage容量上限不同;
  2. localStorage.getItem('key'); 如果key不存在则返回null,而不是 undefined

三、sessionStorage(会话存储)

1、是什么

  • 客户端请求服务端,服务端会为这次请求开辟一块内存空间,这个对象便是 Session 对象,存储结构为 ConcurrentHashMapSession 弥补了 HTTP 无状态特性,服务器可以利用 Session 存储客户端在同一个会话期间的一些操作记录。
  • 服务器第一次接收到请求时,开辟了一块 Session 空间(创建了Session对象),同时生成一个 sessionId ,并通过响应头的 Set-Cookie:JSESSIONID=XXXXXXX 命令,向客户端发送要求设置 Cookie 的响应; 客户端收到响应后,在本机客户端设置了一个 JSESSIONID=XXXXXXXCookie 信息,该 Cookie 的过期时间为浏览器会话结束;

在这里插入图片描述

  • 接下来客户端每次向同一个网站发送请求时,请求头都会带上该 Cookie信息(包含 sessionId ), 然后,服务器通过读取请求头中的 Cookie 信息,获取名称为 JSESSIONID 的值,得到此次请求的 sessionId
  • 会话,代表服务器与浏览器的一次会话过程,这个过程是连续的,也可以时断时续。
  • cookie中存放着一个sessionID,请求时会发送这个ID,Session依据Cookie来识别是否是同一个用户;
  • Session是另一种记录客户状态的机制,不同的是Cookie保存在客户端浏览器中,而Session保存在服务器上。客户端浏览器访问服务器的时候,服务器把客户端信息以某种形式记录在服务器上。客户端浏览器再次访问时只需要从该Session中查找该客户的状态就可以了。
  • session因为请求(request对象)而产生;session的创建与使用总是在服务端,浏览器从来都没有得到过session对象;
  • session是一个容器,数据存储在用户浏览器中,可以存放会话过程中的任何对象;
  • session是一种http存储机制,目的是为武装的http提供持久机制。
  • 设置、读取方便,甚至页面刷新不丢失数据
  • 容量较大, sessionStroage 约 5M,localStorage 约 20 M
  • 只能存储字符串,可以将对象 JSON.stringify() 编码后存储
  • 生命周期为关闭浏览器窗口,并且在 同一个窗口(页面)下数据是可以共享的,数据以键值对的形式存储使用

2、使用

  1. 存储数据
     sessionStorage.setItem(key,value)
    
  2. 获取数据
     sessionStorage.getItem(key)
    
  3. 删除数据
     sessionStorage.removeItem(key)
    
  4. 删除所有数据数据
     sessionStorage.clear()
    

四、Token

  • 一个Token就是一些信息的集合;
  • 在Token中包含足够多的信息,以便在后续请求中减少查询数据库的几率;
  • 服务端需要对cookie和HTTP Authrorization Header进行Token信息的检查;
  • 基于上一点,你可以用一套token认证代码来面对浏览器类客户端和非浏览器类客户端;
  • 因为token是被签名的,所以我们可以认为一个可以解码认证通过的token是由我们系统发放的,其中带的信息是合法有效的;

五、案例:记住用户名

思路:

  1. 把数据存起来,用到本地存储
  2. 关闭页面,也可以显示用户名,所以用 localStorage
  3. 打开页面,先判断是否有这个用户名,如果有,就在表单里面显示用户名,并且勾选复选框
  4. 当复选框发生改变的时候 change 事件
<body>
     <input type="text" id="username">
     <input type="checkbox" id="remember">
     记住用户名
     <script>
         var username = document.querySelector('#username');
         var username = document.querySelector('#remember');
         if (localStroage.getItem('username')) {
             username.value = localStorage.getItem('username');
             remember.checked = true;
         }
         remember.addEventListener('change',function(){
             if (this.checked) {
                 localStorage.setItem('username',username.value)
             }else{
                 localStorage.removeItem('username');
             }
         })
     </script>
</body>
相关实践学习
基于函数计算快速搭建Hexo博客系统
本场景介绍如何使用阿里云函数计算服务命令行工具快速搭建一个Hexo博客。
相关文章
|
5月前
|
存储
Web存储—获取Cookie
Web存储—获取Cookie
|
5月前
|
存储 编解码 缓存
Web存储—本地存储Cookie
Web存储—本地存储Cookie
|
7月前
|
存储
83分布式电商项目 - Cookie存储购物车
83分布式电商项目 - Cookie存储购物车
24 0
|
存储 SQL JSON
再谈浏览器存储之 localStorage 和 cookie
WEB 项目的开发,不可避免的要设计存储,这里所说的主要是浏览器存储。之前在文章《WEB 本地存储:localStorage、Web SQL Database、IndexedDB》介绍过浏览器存储。本文之所有再谈浏览器存储,是希望从更加细致的角度出发,并分享存储相关的方法集合。
222 0
|
存储 移动开发 前端开发
cookie、localStorage和sessionStorage 三者之间的区别以及存储、获取、删除等使用方式
写在前面:前端开发的时候,在网页刷新的时候,所有数据都会被清空,这时候就要用到本地存储的技术,前端本地存储的方式有三种,分别是cookie,localstorage和sessionStorage ,这是大家都知道的。本文的主要内容就是针对这三者的存放、获取,区别、应用场景。有需要的朋友可以做一下参考,喜欢的可以点波赞,或者关注一下,希望可以帮到大家。 本文首发于我的个人blog:obkoro1.com 使用方式:很多文档都是说了一大堆,后面用法都没有说,先要学会怎么用,不然后面的都是扯淡,所以这里我先把使用方式弄出来。 cookie:保存cookie值: var dataCooki
224 0
cookie、localStorage和sessionStorage 三者之间的区别以及存储、获取、删除等使用方式
|
存储 iOS开发
iOS wkwebview嵌入优酷视频,显示“请允许cookie存储”解决方法
iOS wkwebview嵌入优酷视频,显示“请允许cookie存储”解决方法
548 0
|
3天前
|
存储 自然语言处理 API
Session、cookie、token有什么区别?
Session、cookie、token有什么区别?
24 1
|
3天前
|
JavaScript 前端开发 Java
【JavaEE】使Cookie与Session失效-Servlet上传文件操作-优化表白墙(下)
【JavaEE】使Cookie与Session失效-Servlet上传文件操作-优化表白墙
6 0
|
3天前
|
存储 前端开发 Java
【JavaEE】使Cookie与Session失效-Servlet上传文件操作-优化表白墙(上)
【JavaEE】使Cookie与Session失效-Servlet上传文件操作-优化表白墙
8 0
|
3天前
|
存储 JSON 前端开发
【JavaEE】Cookie与Session的前后端交互-表白墙登录设计
【JavaEE】Cookie与Session的前后端交互-表白墙登录设计
6 0