cookies、localStorage 、sessionStorage 的区别

news2024/9/20 20:38:59
  1. 共同点:三者都是浏览器的本地存储。

  2. 区别:

    • 存储位置:cookie是由服务器端写入的,而SessionStorage、LocalStorage都是由前端写入的;

    • 存储大小:cookie的存储空间比较小,大概4KB,而SessionStorage、LocalStorage存储空间比较大,大概5M;

    • 生命周期:cookie的生命周期是由服务器端在写入的时候就设置好的,SessionStorage是页面关闭的时候就会自动清除,LocalStorage是写入就一直存在,除非手动清除;

    • 数据共享:三者的数据共享都遵循同源原则,SessionStorage还限制必须是同一个页面。

    • 发送请求时是否携带:在前端给后端发送请求的时候会自动携带cookie中的数据,但是SessionStorage、LocalStorage不会;

    • 应用场景:cookie一般用于存储登录验证信息SessionID或者token,SessionStorage可以用来检测用户是否是刷新进入页面,如音乐播放器恢复播放进度条功能,多页表单信息填写,LocalStorage常用于存储不易变动的数据,减轻服务器的压力。

1. cookies

介绍:cookie,意思是小甜饼,顾名思义,cookie 确实非常小,它的大小限制为 4KB 左右;每个 HTTP 请求都会带着 Cookie 的信息,所以 Cookie 当然是能精 简就精简!

常用的应用场景:判断用户是否登录:

  • 针对登录过的用户,服 务器端会在他登录时往 Cookie 中加入一段加密过的唯一辨识单一用户的辨识码,下次只要读取这个值就可以判断当前用户是否登录啦。

2. localStorage

介绍:localStorage,它是 HTML5 标准中新加入的技术,localStorage 已经被大多数浏览器所支持;

sessionStorage,它与 localStorage 的接口类似,但保存数据的生命周期与 localStorage 不同,它只是可以将一部分数据在当前会话 中保存下来,刷新页面数据依旧存在。但当页面关闭后,sessionStorage 中的数据就 会被清空。

常用的应用场景

  • localStorage 接替了 Cookie 管理购物车的工作,
    HTML5 游戏通常会产生一些本地数据,localStorage 则是非常适合做 这个工作的。

3. sessionStorage

介绍:sessionStorage,它与 localStorage 的接口类似,但保存数据的生命周期与 localStorage 不同。

  • 它只是可以将一部分数据在当前会话 中保存下来,刷新页面数据依旧存在。但当页面关闭后,sessionStorage 中的数据就 会被清空。

常用的应用场景

  • 如果遇到一些内容特别多的表单,为了优化用户体验,我们可能要把表 单页面拆分成多个子页面,然后按步骤引导用户填写。这时候 sessionStorage 的作用 就发挥出来了。

4. 区别

在这里插入图片描述

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

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

相关文章

webpack编译微信小程序

微信小程序开发目前主要还是依赖小程序原生开发者工具,但开发者工具目前还不支持常用的less、sass样式编译,以及环境变量配置等功能。使用webpack就可以弥补这些问题。 思路 webpack启动后,通过webpack-shell-plugin-next包执行启动后的一些…

沉浸式翻译

chrome沉浸式翻译插件 网页双语翻译,完全免费使用,支持Deepl/Google/Bing/腾讯/有道等。 一款免费、用户友好、简洁、革命性、广受好评的人工智能双语网络翻译扩展程序,可帮助您有效地弥合信息差距,也可在移动设备上使用&#xff…

【ArcGIS Pro二次开发】(44):属性结构描述表【Excel】转空库(批量)

随着县级国土空间总体规划数据库规范的下发,建立标准空库是一项马上就要着手的工作。国空的数据库体量很大,单是要素类就有100多个,不是以前村规数据库能比的,手动建库是不可能的,工具自动建库就是一个很合理的选择。 …

短视频seo矩阵系统源码开发思路

短视频SEO矩阵系统源码开发,需要遵循一下步骤: 1. 确定需求和功能:明确系统的主要目标和需要实现的功能,包括关键词研究、短视频制作、外链建设、数据分析、账号设置优化等方面。 2. 设计系统架构:根据需求和功能确定…

2023第二届中国汽车碳中和国际峰会 嘉宾更新

The 2nd China Automotive Carbon Neutral Summit 2023 2023第二届中国汽车碳中和国际峰会 嘉宾更新 Event Background会议背景 As the world increasingly recognizes the devastating impact of climate change, governments, organizations, and individuals are taking a…

如何安装微信小程序开发工具

1、点击进入微信开发者工具(稳定版 Stable Build)下载地址,选择Win64的版本下载。 2、运行exe程序,可能会出现微软商城安全提醒,不用理睬,直接点运行。 3、点击“下一步”。 4、点击“我接受”。 5、选择安…

vant-weapp源码解析(一)

想每天做点新东西,因此有此记录 这是进入的第一个页面,里面有引入list,page。 config.js:这是路径配置文件 page.js,外层配置文件 options,就算引入这个page.js页面所传递的数据 点击进入导航,看第一个按钮组件 button…

秋招二本4年Java经验,五面字节(定薪45K)

前段时间刚面试上岸,先后面试了各大小公司,拿了一些 offer,有阿里,滴滴,快手,达达,得物等公司。面试的公司大部分都能过,所以这里给大家分享下自己的经验,也给自己做个归…

学习Vue3——生命周期

简单来说就是一个组件从创建到销毁的过程称为生命周期 Vue 2 生命周期钩子函数Vue 3 生命周期钩子函数含义beforeCreatesetup在实例初始化之后、数据观测 (data observer) 和 event/watcher 事件配置之前被调用createdsetup在实例创建完成后被立即调用。在这一步,实…

手机信号老是卡,问题可能出在这四个原因上!

换手机的速度肯定是赶不上换卡的速度,当手机使用了一定的年限之后,不少小伙伴发现信号网速是越来越差,如果是到“五杀暴走” 的关键时刻,突然的卡顿能让你的心降到冰点! 这都是小编和小伙伴们在交流心得的时候得到的一…

uniapp打包app后,微信授权登录

官方文档:App端OAuth(登录鉴权)模块 关键配置项说明: 1、appid 微信开放平台申请应用的AppID值。 2、appSecret(HBuilderX3.4.18 不再提供此参数的可视化配置) 微信开放平台申请应用的AppSecret值。 找到manifest.json文件&am…

VR全景编辑器v1.0版本上线,为企业提供沉浸式全景可视化服务。

随着物联网技术的迅速发展,可视化技术在物联网中起到越来越重要的作用,当康科技经过不懈努力,研发了自己的一款基于物联网VR全景可视化的编辑器,为企业助力可视化服务。 部分源代码:: // 基础图标图库 ex…

几千万记录,数据库表结构如何平滑变更?

回答知识星球水友“逆光下的微笑”提问。 问题域:数据量大、并发量高场景,如何在流量低峰期,平滑实施表结构变更? 画外音,一般来说,是指增加表的属性,因为:(1&#xff09…

手把手教你,本地RabbitMQ服务搭建(windows)

本地RabbitMQ服务搭建(windows) 前言一、Erlang 环境准备1. 下载安装包2. 安装 二、RabbitMQ服务器安装1. 下载安装包2. 安装RabbitMQ server3. 启动RabbitMQ4. 启动状态检测5. 管理插件启用 三、登录管理界面 前言 前面已经对RabbitMQ介绍了很多内容&a…

Excel怎样对比两列数据的异同

很多用户在使用Excel的时候会碰到一种情况就是将两列数据进行对比,如果数据少则很好用肉眼去对比吗,但是数据一多则就麻烦咯,那么下面小编就来教教大家如何快速对比两列数据的异同。 一:适用于对比不同文字的异同; 首先…

提升测试开发工程师工作效率的法宝:ELK日志平台

目录 前言: 1.什么是ELK 2.如何构建ELK通道 3.使用ELK的思考 前言: ELK日志平台是一个非常有用的工具,可以大大提高测试开发工程师的工作效率。ELK是指Elasticsearch、Logstash和Kibana,这三个开源工具的结合构成了一个功能强…

利用阿里云物联网平台(IoT)实现WEB数据可视化

一年前在阿里物联网平台测试过一个项目,后来就搁置了,昨天有事需要用,发现出错了。 调整完后写一下使用思路,以便未来之需。 阿里云物联网(IoT)主页:https://iot.aliyun.com/ 阿里云物联网&…

JavaScript中数组高阶函数的使用

一.数组高阶函数---forEach 它可以用来遍历数组中的每个元素,并对每个元素执行指定的操作。forEach函数接受一个回调函数作为参数,该回调函数在遍历数组的每个元素时被调用。 forEach函数的基本语法 array.forEach(callback(currentValue, index, arr…

java操作influxdb时,出现HTTP status code: 401; Message: unauthorized access

使用java操作influxdb出现HTTP status code: 401; Message: unauthorized access 在这里插入图片描述之前创建客户端是这样的 然后关闭客户端连接 后来我尝试吧influxDB null去掉,每次都创建新的连接 然后就行了哦,咱也不知道为啥,反正就…

Web概述

1.1 程序开发架构 1.1.1C/S体系结构介绍 C/S是Client/Server的缩写,即客户端/服务器结构。在这种结构中,服务器 通常采用高性能的机或工作站,并采用大型数据库系统(如Oracle或SQLServer)客户端 则需要安装专用的客户…