浏览器本地存储之Cookie和webStorage

浏览器本地存储主要包括 Cookie 和 Web Storage 两种机制。它们都是用来在客户端存储数据,以便在浏览器会话之间保持信息或在同一会话中的页面之间共享信息。

一、Cookie

1.1 概念

cookie是客户端与服务器端进行会话使用的一个能够在浏览器本地化存储的技术。简言之,cookie是服务器端发给客户端的文本文件;目的是用于辨别用户身份

1.2 cookie机制

由浏览器所提供,将documen对象的cookie属性提供给JavaScript. 可由JavaScript对其进行控制,但并不是JavaScript本身的性质。Cookie是存于硬盘的一个文件,通常对应于一个域名,当浏览器 再次访问这个域名时,便使这个cookie可用。(cookie可以跨越一个域名下的多个网页,但不能跨越多个域名使用),可作为全局变量。
在这里插入图片描述

1.3 使用场景
  1. 保存用户登录状态
  2. 跟踪用户行为
  3. 定制页面
  4. 创建购物车:使用cookie来记录用户需要购买的商品,再结帐的时候可以统一提交。(淘宝网就是使用cookie记录了用户曾经浏览过的商品,方便随时进行比较)

在这里插入图片描述

1.3 cookie的保存

Cookie被禁用:当用户非常注重个人隐私保护时,他很可能禁用浏览器的cookie功能
Cookie与浏览器相关的:即使访问的是同一个页面,不同浏览器之间所保存的cookie也是不能互相访问的。
Cookie可能被删除:每个cookie都是硬盘上的一个文件,因此很有可能被用户删除
Cookie安全性不高:所有的cookie都是以纯文本的形式记录于文件中,因此如果要保护用户名和密码等信息时,最好事先经过加密处理

1.4 cookie和session的区别

cookie和session都是用来跟踪浏览器用户身份的会话方式

区别

  1. 保存状态:cookie保存在浏览器端,session保存在服务器端

  2. 使用方式
    1)cookie机制:

    如果不在浏览器中设置过期时间,cookie被保存在内存中,生命周期随浏览器的关闭而结束,这种cookie简称会话cookie。如果在浏览器中设置了cookie的过期时间,cookie被保存在硬盘中,关闭浏览器后,cookie数据仍然存在,直到过期时间结束才消失。类比webStorage中的localStorage和sessionStorage。

    Cookie是服务器发给客户端的特殊信息,cookie是以文本的方式保存在客户端,每次请求时都带上它

    2)session机制:

    当服务器收到请求需要创建session对象时,首先会检查客户端请求中是否包含sessionid。如果有sessionid,服务器将根据该id返回对应session对象。如果客户端请求中没有sessionid,服务器会创建新的session对象,并把sessionid在本次响应中返回给客户端。通常使用cookie方式存储sessionid到客户端,在交互中浏览器按照规则将sessionid发送给服务器。

    如果用户禁用cookie,则要使用URL重写,可以通过response.encodeURL(url) 进行实现;API对encodeURL的结束为,当浏览器支持Cookie时,url不做任何处理;当浏览器不支持Cookie的时候,将会重写URL将SessionID拼接到访问地址后

  3. 存储内容:cookie只能保存字符串类型,以文本的方式;session通过类似与Hashtable的数据结构来保存,能支持任何类型的对象(session中可含有多个对象)

  4. 存储大小:cookie:单个cookie保存的数据不能超过4kb;session大小没有限制。

  5. 安全性

  6. cookie:针对cookie所存在的攻击:Cookie欺骗,Cookie截获;session的安全性大于cookie。
    原因如下:
    1)sessionID存储在cookie中,若要攻破session首先要攻破cookie;
    2)sessionID是要有人登录,或者启动session_start才会有,所以攻破cookie也不一定能得到sessionID;
    3)第二次启动session_start后,前一次的sessionID就是失效了,session过期后,sessionID也随之失效。
    4)sessionID是加密的
    5)综上所述,攻击者必须在短时间内攻破加密的sessionID,这很难。

  7. 应用场景:
    cookie:
    1)判断用户是否登陆过网站,以便下次登录时能够实现自动登录(或者记住密码)。如果我们删除cookie,则每次登录必须从新填写登录的相关信息。
    2)保存上次登录的时间等信息。
    3)保存上次查看的页面
    4)浏览计数
    session:
    Session用于保存每个用户的专用信息,变量的值保存在服务器端,通过SessionID来区分不同的客户
    1)网上商城中的购物车
    2)保存用户登录信息
    3)将某些数据放入session中,供同一用户的不同页面使用
    4)防止用户非法登录

  8. 缺点:
    cookie:
    1)大小受限
    2)用户可以操作(禁用)cookie,使功能受限
    3)安全性较低
    4)有些状态不可能保存在客户端。
    5)每次访问都要传送cookie给服务器,浪费带宽。
    6)cookie数据有路径(path)的概念,可以限制cookie只属于某个路径下。
    session:
    1)Session保存的东西越多,就越占用服务器内存,对于用户在线人数较多的网站,服务器的内存压力会比较大。
    2)依赖于cookie(sessionID保存在cookie),如果禁用cookie,则要使用URL重写,不安全
    3)创建Session变量有很大的随意性,可随时调用,不需要开发者做精确地处理,所以,过度使用session变量将会导致代码不可读而且不好维护。

二、webStorage

WebStorage的目的是克服由cookie所带来的一些限制,当数据需要被严格控制在客户端时,不需要持续的将数据发回服务器。

WebStorage两个主要目标:(1)提供一种在cookie之外存储会话数据的路径。(2)提供一种存储大量可以跨会话存在的数据的机制。

HTML5的WebStorage提供了两种API:localStorage(本地存储)和sessionStorage(会话存储)。

1. localStorage

localStorage生命周期是永久,除非主动清除localStorage信息,否则这些信息将永远存在。存放数据大小为一般为5MB,而且它仅在客户端(即浏览器)中保存,不参与和服务器的通信。
在这里插入图片描述

2. sessionStorage

sessionStorage 属性允许你访问一个,对应当前源的 session Storage 对象。它与 localStorage 相似,不同之处在于 localStorage 里面存储的数据没有过期时间设置,而存储在 sessionStorage 里面的数据在页面会话结束时会被清除

  • 页面会话在浏览器打开期间一直保持,并且重新加载或恢复页面仍会保持原来的页面会话。
  • 在新标签或窗口打开一个页面时会复制顶级浏览会话的上下文作为新会话的上下文,这点和 session cookies 的运行方式不同。
  • 打开多个相同的URL的Tabs页面,会创建各自的sessionStorage。
  • 关闭对应浏览器窗口(Window)/ tab,会清除对应的sessionStorage。

sessionStorage仅在当前会话下有效,关闭页面或浏览器后被清除。存放数据大小为一般为5MB,而且它仅在客户端(即浏览器)中保存,不参与和服务器的通信。

在这里插入图片描述

3. webStorage的优点

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

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

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

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

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

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

  • setItem (key, value) —— 保存数据,以键值对的方式储存信息。
  • getItem (key) —— 获取数据,将键值传入,即可获取到对应的value值
  • removeItem (key) —— 删除单个数据,根据键值移除对应的信息。
  • clear () —— 删除所有的数据
  • key (index) —— 获取某个索引的key

参考博客:cookie、sessionStorage,localStorage区别

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

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

相关文章

nocos注册中心使用教程

1.下载和安装 进入到官网下载就好了 解压 启动 2.新建提供者模块 2.1新建提供者模块cloudalibaba-provider-payment9001 2.1.1在父项目中新加入依赖 <dependency><groupId>com.alibaba.cloud</groupId><artifactId>spring-cloud-alibaba-depend…

2022 年中职组“ 网络安全 ”赛项-web加固阶段题目

前言 大家好&#xff0c;本章节我将复现一次web加固阶段的操作&#xff0c;给大家看看该怎么操作和截图的具体事项&#xff0c;懂的大佬可以在评论区留言改进&#xff0c;感谢大家的支持&#xff01;接下来就跟随我的步伐一起来操作吧&#xff01; 阶段题目概览 环境搭建 底层…

【Eclipse】Plug-in Development 插件的安装

先按路线找到需要的页面&#xff1a;eclipse–Window–Preferences–Java–Editor–Content Assist 在Work with框中输入&#xff1a;http://download.eclipse.org/releases/2019-06 PS&#xff1a;后面的2019-06是eclipse发行的时间 选择&#xff1a;General Purpose Tools 下…

rhel8 nmcli学习

rhel8我自己用过的配置网路方法有以下几个&#xff1a; &#xff08;1)手动配置ifcfg文件&#xff0c;通过NM来生效。 (2)手动配置ifcfg文件&#xff0c;通过重启NetworkManager.service生效。 (3)通过NM自带工具配置网络&#xff0c;比如nmcli。 (4)使用命令 nutui命令&am…

4x4矩阵键盘设计Verilog矩阵式键盘控制,视频/代码

名称&#xff1a;4x4矩阵键盘设计Verilog矩阵式键盘控制 软件&#xff1a;Quartus 语言&#xff1a;Verilog 代码功能&#xff1a; 键盘控制电路设计&#xff0c;设计一个4x4矩阵式键盘控制电路&#xff0c;并实现按键的显示。 演示视频&#xff1a;4x4矩阵键盘设计Verilo…

【Java】jvm 元空间、常量池(了解)

JDK1.8 以前的 HotSpot JVM 有方法区&#xff0c;也叫永久代&#xff08;permanent generation&#xff09;方法区用于存放已被虚拟机加载的类信息&#xff0c;常量、静态遍历&#xff0c;即编译器编译后的代码JDK1.7 开始了方法区的部分移除&#xff1a;符号引用&#xff08;S…

docker之Harbor私有仓库

目录 一、什么是Harbor 二、Harbor的特性 三、Harbor的构成 1、六个组件 2、七个容器 四、私有镜像仓库的上传与下载 五、部署docker-compose服务 把项目中的镜像数据进行打包持久数据&#xff0c;如镜像&#xff0c;数据库等在宿主机的/data/目录下&#xff0c; 一、什么…

Kafka 开启SASL/SCRAM认证 及 ACL授权(二)ACL

Kafka 开启SASL/SCRAM认证 及 ACL授权(二)ACL。 官网地址:https://kafka.apache.org/ kafka authentorization:https://docs.confluent.io/platform/current/kafka/authorization.html 一、开启ZK ACL(可选,内网环境,用户无机器访问权限时) 给kafka meta都加上zk的ac…

Android 内容提供者和内容观察者:数据共享和实时更新的完美组合

任务要求 一个作为ContentProvider提供联系人数据另一个作为Observer监听联系人数据的变化&#xff1a; 1、创建ContactProvider项目&#xff1b; 2、在ContactProvider项目中用Sqlite数据库实现联系人的读写功能&#xff1b; 3、在ContactProvider项目中通过ContentProvid…

网络基础(2)

UDP 1.传输层2.再谈端口号3.端口号范围划分4.认识知名端口号(Well-Know Port Number)5.netstat6.pidof7.UDP协议端格式8.UDP的特点9.面向数据报10.UDP的缓冲区11.UDP使用注意事项12.基于UDP的应用层协议 &#x1f31f;&#x1f31f;hello&#xff0c;各位读者大大们你们好呀&am…

kettle应用-从数据库抽取数据到excel

本文介绍使用kettle从postgresql数据库中抽取数据到excel中。 首先&#xff0c;启动kettle 如果kettle部署在windows系统&#xff0c;双击运行spoon.bat或者在命令行运行spoon.bat 如果kettle部署在linux系统&#xff0c;需要执行如下命令启动 chmod x spoon.sh nohup ./sp…

【论文精读】NMP: End-to-end Interpretable Neural Motion Planner

toc 1 背景信息 团队&#xff1a;Uber&#xff0c;多伦大大学 年份&#xff1a;2019 论文链接&#xff1a;https://arxiv.org/abs/2101.06679 2 Motivation 深度学习方案受限于累积误差suffers from the compounding error&#xff0c;而且可解释性差interpretability is d…

【Java 进阶篇】JavaScript DOM 编程:理解文档对象模型

在 web 开发中&#xff0c;DOM&#xff08;文档对象模型&#xff09;是一个重要的概念。DOM 是一种将网页文档表示为树状结构的方式&#xff0c;允许开发者使用 JavaScript 来访问和操作网页的内容。本篇博客将详细介绍 DOM&#xff0c;包括什么是 DOM、如何访问 DOM 元素、如何…

Raven2靶机渗透

文章目录 主机扫描web渗透 主机扫描 先ip a查看一下kali虚拟机本机ip&#xff0c;然后用nmap -sn扫描同网段的ip&#xff1a; nmap -sn 192.168.101.0/24如图&#xff0c;扫描到靶机IP为192.168.101.129&#xff1a; 扫描到靶机IP后探测开放的服务&#xff1a; nmap -A 19…

SpringBoot面试题1:什么是SpringBoot?为什么要用SpringBoot?

该文章专注于面试,面试只要回答关键点即可,不需要对框架有非常深入的回答,如果你想应付面试,是足够了,抓住关键点 面试官:什么是SpringBoot? Spring Boot 是一个用于快速开发独立的、基于 Spring 框架的应用程序的开源框架。它简化了 Spring 应用的配置和部署过程,使…

超低延时 TCP/UDP IP核

实现以太网协议集当中的ARP、ICMP、UDP以及TCP协议 一、概述 TCP_IP核是公司自主开发的使用FPGA逻辑搭建的用于10G以太网通信IP。该IP能够实现以太网协议集当中的ARP、ICMP、UDP以及TCP协议。支持连接10G/25G以太网PHY&#xff0c;组成高速网络通信系统。该IP上传、下传数据B…

fastjson 1.2.47 远程命令执行漏洞

fastjson 1.2.47 远程命令执行漏洞 文章目录 fastjson 1.2.47 远程命令执行漏洞1 在线漏洞解读:2 环境搭建3 影响版本&#xff1a;4 漏洞复现4.1 访问页面4.2 bp抓包&#xff0c;修改参数 5 使用插件检测漏洞【FastjsonScan】5.1使用説明5.2 使用方法5.2.1 右键菜单中&#xff…

算法通关村第一关-链表青铜挑战笔记

欢迎来到 : 第一关青铜关 java如何创建链表链表怎么增删改查 我们先了解链表 单链表的概念 我们从简单的创建和增删改查开始. 链表的概念 线性表分为顺序表(数组组成)和链表(节点组成) . 链表又分: 单向 双向有哨兵节点 无哨兵节点循环 不循环 链表是一种物理存储单…

一文了解 Go fmt 标准库的常用占位符及其简单使用

今天分享的内容是 Go fmt 标准库的常用占位符及其简单使用。如果本文对你有帮助&#xff0c;不妨点个赞&#xff0c;如果你是 Go 语言初学者&#xff0c;不妨点个关注&#xff0c;一起成长一起进步&#xff0c;如果本文有错误的地方&#xff0c;欢迎指出 占位符 通过占位符&a…

【LeetCode热题100】--121.买卖股票的最佳时机

121.买卖股票的最佳时机 class Solution {public int maxProfit(int[] prices) {int minprice Integer.MAX_VALUE;int maxprofit 0;for(int i 0;i<prices.length;i){if(prices[i] < minprice){minprice prices[i]; //找到最小值}else if(prices[i] - minprice > ma…