cookie

解决问题

http 请求是无状态的，即使第一次和服务器连接后并且登录成功后，第二次请求服务器依然不知道当前请求是哪个用户。
cookie 第一次登录后服务器返回一些数据（cookie）给浏览器，然后浏览器保存在本地，当该用户发送第二次请求的时候，就会自动的把上次请求存储的 cookie 数据携带给服务器，服务器通过浏览器携带的数据就能判断当前用户是哪个。

作用

1、保存用户登录状态。
例如将用户 id 存储于一个 cookie 内，这样当用户下次访问该页面时就不需要重新登录了，还可以设置过期时间，如一个月、三个月、一年等。
2、跟踪用户行为。
例如系统能够记住上一次访问的记录，当下次再打开该页面时，它就会自动显示上次用户所选的记录。

cookie 如何防范 XSS 攻击

在 HTTP 头部配上 set-cookie
set-cookie.httponly —— 可以防止 XSS，禁止 javascript 脚本来访问 cookie
set-cookie.secure —— 告诉浏览器仅在请求为 https 的时候发送 cookie

cookie 属性

name
value
domain（域名）
path（路径）
expires/Max-Age （超时时间）
size（大小）
http（httponly 属性）
secure （是否通过 https 传递）

缺点

1、cookie 需要在客户端和服务器端之间来回传送，浪费不必要的资源。
2、cookie 的存储大小有限制，对于每个域，一般只能设置20个 cookie，每个 cookie 大小不能超过4KB。
3、cookie 的安全性低，因为保存在客户端中，其中包含的任何数据都可以被他人访问。

sessionStorage

概念

sessionStorage 对象是存储特定于某个会话的数据，数据只保存到浏览器关闭，但是数据可以跨越页面刷新而存在。

使用

//  使用方法存储数据
sessionStorage.setItem("ifClick", "true");//  使用属性存储数据
sessionStorage.ifClick = "true";

特点

1、只在本地存储：数据不会跟随 HTTP 请求一起发送到服务器，只会在本地生效，并在关闭标签页后清除数据。
2、存储方式：key、value的方式
3、存储上限限制：一般为5MB，但不同的浏览器存储上限不一样。

localStorage

概念

localStorage 用于长久保存整个网站的数据，保存的数据没有过期时间，直到手动去删除。

使用

localStorage.setItem("ifClick","true");

特点

1、同源策略限制：若想在不同页面之间对同一个 localStorage 进行操作，这些页面必须是同源的。
2、只在本地存储：数据不会跟随HTTP请求一起发送到服务器，只会在本地生效，且长期有效直到手动删除。
3、存储方式：key、value的方式
4、存储上限限制：一般为5MB。
5、本质：对字符串的读取，如果存储内容多的话会占用内存空间，会导致页面变卡。

三种存储方式的区别

1、交互

cookie在浏览器和服务器间来回传递；而 sessionStorage 和 localStorage 不参与和服务器的交互，仅在本地保存。

2、存储大小

cookie 存储的数据不能超过4k，因为每次http请求都会携带 cookie，所以只适合保存很小的数据；sessionStorage 和 localStorage 一般为5M或更大。

3、数据有效期

sessionStorage 仅在当前浏览器窗口关闭或刷新前有效；而 localStorage 保存数据始终有效，即使窗口或浏览器关闭；cookie 在开发人员设置的有效期时间之前一直有效，即使窗口或浏览器关闭。

4、共享

sessionStorage 在不同的浏览器窗口中不能共享，即使是同源页面；cookie 和 localStorage 在所有同源窗口中都是共享的。

参考文章：https://www.cnblogs.com/Yellow-ice/p/10507472.html、https://blog.csdn.net/weixin_30596023/article/details/95141645

浏览器中数据的存储方式相关推荐

opengl中的Floatbuffer和IntBuffer与java中数据的存储方式不同的解决方法，编辑一个自己的BufferUtil工具类
opengl中的Floatbuffer和IntBuffer与java中数据的存储方式不同的解决方法,编辑一个自己的BufferUtil工具类参考文章: (1)opengl中的Floatbuffer和 ...
Matlab中数据的存储方式
简介 MATLAB提供了丰富的算法以及一个易于操作的语言,给算法研发工作者提供了很多便利.然而MATLAB在执行某些任务的时候,执行效率偏低,测试较大任务量时可能会引起较长时间的等待.未解决这个问题, ...
赶紧进来修内功--- 详细讲解在内存中数据的存储方式(整形篇)
本文详细介绍了所有整形家族类型的取值范围;整形数据在内存中的存储方式(大小端存储方式)以及对应的解析,介绍讲解判断当前机器的存储方式代码练习题,掌握后编程基础更进一步牢固!!! 数据的存储一.整形数 ...
【Java数据结构】计算机中数据的存储方式（为什么要使用B树）
多路查找树计算机的存储内存硬盘硬盘基本构成硬盘存储的优缺点磁盘的预读二叉树与B树二叉树读取数据 B树读取数据计算机的存储计算机中的存储大致可以分为内存与硬盘存储,硬盘还能继续分为机 ...
c语言中负数的读取和存储,C语言中负数的存储方式
详细介绍负数的文章: https://blog.csdn.net/daiyutage/article/details/8575248 1.以char类型举例,其取值范围是 -128 ~ 127,即-2 ...
转载——C语言中float,double类型,在内存中的结构(存储方式)
最近在做一个数据格式分析和转换的项目,第一次接触底层的二进制代码存储,看的一头雾水,看到这个帖子后对于在Windows系统下数据的存储方式有了更多的了解,将原文分享一下: 原文地址为http://ww ...
西门子——不同数据的存储方式
西门子--不同数据的存储方式(String) 前言一.String(字符串类型) 1.结构分析 2.声明变量二.WString(字符串类型--中文) 1.结构分析 2.声明变量 3.举例说明参考 ...
datasg中数据的存储结构
datasg中数据的存储结构转载于:https://www.cnblogs.com/LoveFishC/archive/2012/07/27/3845623.html
UDS中数据的存储（FLASH/EEPROM/RAM）
返回UDS系列讲解总目录 UDS中数据的存储是一个容易混淆但又非常重要的点,下面我们就来简单捋一捋. ECU中用到的存储芯片通常有三种:FLASH,RAM,EEPROM. FLASH一次写入,掉电数据 ...

浏览器中数据的存储方式