当前位置: 首页 > news >正文

【HTML5高级第一篇】Web存储 - cookie、localStorage、sessionStorage

文章目录

    • 一、数据存储
      • 1.1 cookie
        • 1.1.1 概念介绍
        • 1.1.2 存储与获取
        • 1.1.3 方法的封装
        • 1.1.4 总结
      • 1.2 localstorage 与 sessionstorage
        • 1.2.1 概述
        • 1.2.2 操作数据的属性或方法
        • 1.2.3 案例-提交问卷
        • 1.2.4 Web Storage带来的好处
    • 附录:
      • 1. HTML5提供的数据持久化技术(离线存储)
      • 2. 应用缓存(Application Cache

一、数据存储

1.1 cookie

1.1.1 概念介绍

我们在使用网络功能的时候,必定少不了一个协议,那就是HTTP协议。但是由于HTTP协议是无状态的,它在链接之后就会断开,不会记录用户的信息。这时,我们就引入了cookie的概念。

原生JavaScipt案例合集
JavaScript +DOM基础
JavaScript 基础到高级
Canvas游戏开发

Cookie是网站为了辨别用户身份,进行会话跟踪而存储在用户本地终端上的数据。Cookie在HTTP协议之中被默认携带。它有以下的几个特性:

  • 存储的数据只能是字符串格式;
  • 在同一域名下,存储文件的大小一般为4KB,数量为50条;
  • 时效性,在一定时间后,cookie会被销毁,最短的有效期为当浏览器关闭时,cookie就被销毁;
  • 安全性,采用同源策略,即同协议,同域名,同端口,在此条件下,才能进行读取。

接下来,简单介绍一下cookie的操作:

  • cookie要设置name和value;
  • Cookie的domain,即域名,一般情况下使用domain的默认设置;
  • 设置cookie的path;
  • 设置cookie的expires,即cookie的过期时间。

1.1.2 存储与获取

cookie格式: key = value

查看cookie:打开浏览器通过地址栏前面感叹号 或 控制台切换到Application,找到 Cookies 点击即可

设置和读取cookie

//创建或修改cookie
document.cookie = "name = Jack"; //创建变量接收读取到的cookie值,并打印
var getCookie = document.cookie;  
console.log(getCookie); //通过添加expires设置过期时间	
document.cookie = "name=;expires=Thu, 01 Jan 1970 00:00:00 GMT";

注:1. cookie设置的过期时间是以服务器时间为基准,在浏览器得到服务器的任何HTTP响应头后会将浏览器的时间与服务器同步。

  2. 使用new Date() 获取的本地时间并不准确,与服务器相差很大。本地时间可被客户修改,如果cookie使用本地时间可被人利用实现永久免登陆验4

cookie的使用

添加cookie:document.cookie = “key=value”; // 一次写入一个键值对
document.cookie = 'test1=hello';
document.cookie = 'test2=world';
//在浏览器中查看一下现在的cookie是什么样子   打开控制台 点击application 就能看到cookies
//注意 document.cookie一次只能写入一个 Cookie,而且写入并不是覆盖,而是添加读取cookie:document.cookie;document.cookie // "test1=hello; test2=world"
上面代码从document.cookie一次性读出两个 Cookie,它们之间使用 分号空格 分隔。必须手动还原,才能取出每一个 Cookie 的值。var cookies = document.cookie.split('; ');for (var i = 0; i < cookies.length; i++) { console.log(cookies[i]);
}
// foo=bar// baz=bar修改cookie:document.cookie = “key=value”;  // 修改名为key的cookie值document.cookie = 'test2=hah';
document.cookie // "test1=hello; test2=hah"上面代码修改了test2对应的值失效时间:expires ,没有设置失效时间的cookie 在浏览器关闭以后就会自动删除,如果设置了失效时候在未来的时间,就可以让cookie保存的时间长一点
设置失效时间:document.cookie = “key=value;expires=”+ oDate;var oDate = new Date();
oDate.setDate(oDate.getDate() + 7);
document.cookie = “key=value;expires=”+ oDate;
//上面代码设置cookie的过期时间为7天以后删除cookie:将cookie值覆盖为空,并将失效时间设置为过去的时间。var oDate = new Date();
oDate.setDate(oDate.getDate() -7);
document.cookie = “test=;expires=”+ oDate;
//将cookie的过期时间设置为 7天前,test 这个cookie 就获取不到

1.1.3 方法的封装

function setCookie(name,value,n){var oDate = new Date();oDate.setDate(oDate.getDate()+n);document.cookie = name+"="+value+";expires="+oDate;
}function getCookie(name){var str = document.cookie;var arr = str.split("; ");for(var i = 0; i < arr.length; i++){//console.log(arr[i]);var newArr = arr[i].split("=");if(newArr[0]==name){return newArr[1];}}
}function removeCookie(name){setCookie(name,1,-1);
}

1.1.4 总结

以上种种可以看出,cookie不适合大量数据的存储,因为他们由每个服务器的请求来传递,使得cookie速度很慢而且效率也不高;

在HTML5中,提供了两种在客户端存储数据的新方法:

  • localStorage 没有时间限制的数据存储
  • sessionStorage 针对一个session(会话)的数据存储

这两种数据都不是由每个服务器请求传递的,而是只有在请求时使用数据,它使 在不影响网站性能的情况下存储 大量数据成为可能。

对于不同网站,数据存储于不同的区域,并且一个网站只能访问其自身的数据。

1.2 localstorage 与 sessionstorage

1.2.1 概述

localStorage 永久级别的存储。只要是再次访问这个域名中的任何一个页面,都可以提取到数据。只要浏览器不卸载,数据就会一直存在。当然,我们可以手动删除数据。

sessionStorage 会话级别的存储。仅在当前页面中有效,页面关闭数据销毁,页面之间不可以互相访问。

浏览器中的位置:

在这里插入图片描述

注:1. localStorage 和 sessionStorage在使用上完全相同,也就是它们具有相同的API。不同之处也就是上面所说的

​ 2. 本地存储存储数据的格式 JSON串(key-value形式)

1.2.2 操作数据的属性或方法

H5封装好了localstorage的属性及方法如下:

  • localstorage.length 获取当前存储的键值对数量
  • localstorage.key(n) 获取第n项的键值
  • localstorage.setItem(key,value) 设置对应的键值对
  • localstorage.getItem(key) 获取对应键值的数据
  • localstorage.removeItem(key) 清除某个数据
  • localstorage.clear() 清除存储的所有数据

localStorage 除了通过以上H5封装好的方法进行设置和获取,还可以像普通对象一样用点(.)操作符 或 [] 进行数据的设置和获取

// 以animal名字将json串catStr存储到localStorage中   	  
localStorage.animal = catStr;
localStorage["animal"] = catStr;

在这里插入图片描述

1.2.3 案例-提交问卷

在这里插入图片描述

代码示例

<h1>新型肺炎防治知识试题</h1>
<form><div><h3>Q1:为控制“新型冠状病毒感染的肺炎”疫情的传播、蔓延、医务人员应做到( )</h3><div><input type="radio" name="q1">早发现、早报告、早诊断、早治疗</div><div><input type="radio" name="q1">早发现、早报告、早诊断、早转院、早治疗</div><div><input type="radio" name="q1">早发现、早诊断、早隔离、早治疗</div><div><input type="radio" name="q1">早发现、早报告、早诊断、早治疗</div></div><div><h3>Q2:为控制“新型冠状病毒感染的肺炎”疫情的传播、蔓延、医务人员应做到( )</h3><div><input type="radio" name="q2">早发现、早报告、早诊断、早治疗</div><div><input type="radio" name="q2">早发现、早报告、早诊断、早转院、早治疗</div><div><input type="radio" name="q2">早发现、早诊断、早隔离、早治疗</div><div><input type="radio" name="q2">早发现、早报告、早诊断、早治疗</div></div><div><h3>Q3:为控制“新型冠状病毒感染的肺炎”疫情的传播、蔓延、医务人员应做到( )</h3><div><input type="radio" name="q3">早发现、早报告、早诊断、早治疗</div><div><input type="radio" name="q3">早发现、早报告、早诊断、早转院、早治疗</div><div><input type="radio" name="q3">早发现、早诊断、早隔离、早治疗</div><div><input type="radio" name="q3">早发现、早报告、早诊断、早治疗</div></div><div><h3>Q4:为控制“新型冠状病毒感染的肺炎”疫情的传播、蔓延、医务人员应做到( )</h3><div><input type="radio" name="q4">早发现、早报告、早诊断、早治疗</div><div><input type="radio" name="q4">早发现、早报告、早诊断、早转院、早治疗</div><div><input type="radio" name="q4">早发现、早诊断、早隔离、早治疗</div><div><input type="radio" name="q4">早发现、早报告、早诊断、早治疗</div></div><div><h3>Q5:为控制“新型冠状病毒感染的肺炎”疫情的传播、蔓延、医务人员应做到( )</h3><div><input type="radio" name="q5">早发现、早报告、早诊断、早治疗</div><div><input type="radio" name="q5">早发现、早报告、早诊断、早转院、早治疗</div><div><input type="radio" name="q5">早发现、早诊断、早隔离、早治疗</div><div><input type="radio" name="q5">早发现、早报告、早诊断、早治疗</div></div><input type="submit" value="提交">
</form>
<script>var form = document.querySelector("form");form.onsubmit = function(){if(localStorage.submit){alert("不能重复提交");}else{localStorage.submit = true;alert("表单成功提交...")}}
</script>

1.2.4 Web Storage带来的好处

  • 减少网络流量:一旦数据保存在本地后,就可以避免再向服务器请求数据,因此减少不必要的数据请求,减少数据在浏览器和服务器间不必要地来回传递。

  • 快速显示数据:性能好,从本地读数据比通过网络从服务器获得数据快得多,本地数据可以即时获得。再加上网页本身也可以有缓存,因此整个页面和数据都在本地的话,可以立即显示。

  • 临时存储:很多时候数据只需要在用户浏览一组页面期间使用,关闭窗口后数据就可以丢弃了,这种情况使用sessionStorage非常方便。

附录:

1. HTML5提供的数据持久化技术(离线存储)

  • Application Cache:本地缓存应用所需的文件(保存应用本身不保存数据)
  • LocalStorage 和 SessionStorage 以键值对(JSON串)格式存储数据
  • Web SQL 关系数据库,通过SQL语句访问
  • IndexDB 索引数据库

2. 应用缓存(Application Cache

  • 案例链接:http:// m.ftchinese.com/phone.html
  • 应用技术:Application Cache、LocalStorage、Web SQL
  • 应用缓存(Application Cache)关键:Manifest文件(应用所需要的文件清单)
  • 应用缓存特点:Manifest文件有变化才更新,一次必须更新Manifest中所有文件下次才生效(更新不及时)

相关文章:

【HTML5高级第一篇】Web存储 - cookie、localStorage、sessionStorage

文章目录 一、数据存储1.1 cookie1.1.1 概念介绍1.1.2 存储与获取1.1.3 方法的封装1.1.4 总结 1.2 localstorage 与 sessionstorage1.2.1 概述1.2.2 操作数据的属性或方法1.2.3 案例-提交问卷1.2.4 Web Storage带来的好处 附录&#xff1a;1. HTML5提供的数据持久化技术&#x…...

Flink---1、概述、快速上手

1、Flink概述 1.1 Flink是什么 Flink的官网主页地址&#xff1a;https://flink.apache.org/ Flink的核心目标是“数据流上有状态的计算”(Stateful Computations over Data Streams)。 具体说明&#xff1a;Apache Flink是一个“框架和分布式处理引擎”&#xff0c;用于对无界…...

QT实现TCP通信(服务器与客户端搭建)

一、TCP通信框架 二、QT中的服务器操作 创建一个QTcpServer类对象&#xff0c;该类对象就是一个服务器调用listen函数将该对象设置为被动监听状态&#xff0c;监听时&#xff0c;可以监听指定的ip地址&#xff0c;也可以监听所有主机地址&#xff0c;可以通过指定端口号&#x…...

云备份项目

云备份项目 1. 云备份认识 自动将本地计算机上指定文件夹中需要备份的文件上传备份到服务器中。并且能够随时通过浏览器进行查看并且下载&#xff0c;其中下载过程支持断点续传功能&#xff0c;而服务器也会对上传文件进行热点管理&#xff0c;将非热点文件进行压缩存储&…...

基础算法(一)

目录 一.排序 快速排序: 归并排序: 二.二分法 整数二分模板: 浮点二分: 一.排序 快速排序: 从数列中挑出一个元素&#xff0c;称为 "基准"重新排序数列&#xff0c;所有元素比基准值小的摆放在基准前面&#xff0c;所有元素比基准值大的摆在基准的后面&#…...

Consider defining a bean of type问题解决

Consider defining a bean of type问题解决 Consider defining a bean of type问题解决 包之后&#xff0c;发现项目直接报错Consider defining a bean of type。 会有一些包你明明Autowired 但是还是找不到什么bean 导致你项目启动不了 解决方法一: 这个问题主要是因为项目拆包…...

Android 1.2.1 使用Eclipse + ADT + SDK开发Android APP

1.2.1 使用Eclipse ADT SDK开发Android APP 1.前言 这里我们有两条路可以选&#xff0c;直接使用封装好的用于开发Android的ADT Bundle&#xff0c;或者自己进行配置 因为谷歌已经放弃了ADT的更新&#xff0c;官网上也取消的下载链接&#xff0c;这里提供谷歌放弃更新前最新…...

Llama-7b-hf和vicuna-7b-delta-v0合并成vicuna-7b-v0

最近使用pandagpt需要vicuna-7b-v0&#xff0c;重新过了一遍&#xff0c;前段时间部署了vicuna-7b-v3&#xff0c;还是有不少差别的&#xff0c;transforms和fastchat版本更新导致许多地方不匹配&#xff0c;出现很多错误&#xff0c;记录一下。 更多相关内容可见Fastchat实战…...

Centos、OpenEuler系统安装mysql

要在CentOS上安装MySQL并设置开机自启和root密码&#xff0c;请按照以下步骤进行操作&#xff1a; 确保您的CentOS系统已连接到Internet&#xff0c;并且具有管理员权限&#xff08;root或sudo访问权限&#xff09;。打开终端或SSH会话&#xff0c;使用以下命令安装MySQL&…...

如何在Win10系统上安装WSL(适用于 Linux 的 Windows 子系统)

诸神缄默不语-个人CSDN博文目录 本文介绍的方法不是唯一的安装方案&#xff0c;但在我的系统上可用。 文章目录 1. 视频版2. 文字版和代码3. 本文撰写过程中使用到的其他网络参考资料 1. 视频版 B站版&#xff1a;在Windows上安装Linux (WSL, 适用于 Linux 的 Windows 子系统…...

单片机通用学习-​什么是寄存器?​

什么是寄存器&#xff1f; 寄存器是一种特殊的存储器&#xff0c;主要用于存储和检查微机的状态。CPU寄存器用于存储和检查CPU的状态&#xff0c;具体包括计算中途数据、程序因中断或子程序分支时的返回地址、计算结果为零时的负值、计算结果为零时的信息、进位值等。 由于CP…...

【C语言】文件操作详解

文章目录 前言一、文件是什么二、文件具体介绍1.文件名2.文件类型3.文件缓冲区4.文件指针5.文件的打开和关闭 三、文件的顺序读写1.字符输入函数&#xff08;fgetc&#xff09;2.字符输出函数&#xff08;fputc&#xff09;3.文本行输入函数&#xff08;fgets&#xff09;4.文本…...

栈(Stack)的详解

目录 1.栈的概念 2.栈的模拟实现 1.栈的方法 2.模拟栈用&#xff08;整型&#xff09;数组的形式呈现 2.1栈的创建 2.2压栈 2.3栈是否为空 2.4出栈 2.5获取栈中有效元素个数 2.6获取栈顶元素 2.7完整代码实现 1.栈的概念 从上图中可以看到&#xff0c; Stack 继承了…...

深入了解GCC编译过程

关于Linux的编译过程&#xff0c;其实只需要使用gcc这个功能&#xff0c;gcc并非一个编译器&#xff0c;是一个驱动程序。其编译过程也很熟悉&#xff1a;预处理–编译–汇编–链接。在接触底层开发甚至操作系统开发时&#xff0c;我们都需要了解这么一个知识点&#xff0c;如何…...

leetcode 594.最长和谐子序列(滑动窗口)

⭐️ 题目描述 &#x1f31f; leetcode链接&#xff1a;最长和谐子序列 思路&#xff1a; 第一步先将数组排序&#xff0c;在使用滑动窗口&#xff08;同向双指针&#xff09;&#xff0c;定义 left right 下标&#xff0c;比如这一组数 {1,3,2,2,5,2,3,7} 排序后 {1,2,2,2,3,…...

深入剖析云计算与云服务器ECS:从基础到实践

云计算已经在不断改变着我们的计算方式和业务模式&#xff0c;而云服务器ECS&#xff08;Elastic Compute Service&#xff09;作为云计算的核心组件之一&#xff0c;为我们提供了灵活、可扩展的计算资源。在本篇长文中&#xff0c;我们将从基础开始&#xff0c;深入探讨云计算…...

苍穹外卖技术栈

重难点详解 1、定义全局异常 2、ThreadLocal ThreadLocal 并不是一个Thread&#xff0c;而是Thread的一个局部变量ThreadLocal 为每一个线程提供独立的存储空间&#xff0c;具有线程隔离的效果&#xff0c;只有在线程内才能取到值&#xff0c;线程外则不能访问 public void …...

重新开始 杂类:C++基础

目录 1.输入输出 2 . i 与 i 3.结构体 4.二进制 1.输入输出 #include<cstdio>//cin>>,cout #include<iostream>//printf,scanf &#xff08;1&#xff09; cin , cout输入输出流可直接用于数字&#xff0c;字符 &#xff08;2&#xff09;scanf(&quo…...

自用的markdown与latex特殊符号

\triangleq \approx \xlongequal[y\arctan x]{x\tan y} \sum_{\substack{j1 \\ j\neq i}} \iiint\limits_\Omega \overset{\circ}{\vec{r}} \varphi \checkmark \stackrel{\cdot\cdot\cdot}{x}≜ ≈ y arctan ⁡ x x tan ⁡ y ∑ j 1 j ≠ i ∭ Ω r ⃗ ∘ φ ✓ x ⋅ ⋅ ⋅…...

【20期】说一说Java引用类型原理

Java中一共有4种引用类型(其实还有一些其他的引用类型比如FinalReference)&#xff1a;强引用、软引用、弱引用、虚引用。 其中强引用就是我们经常使用的Object a new Object(); 这样的形式&#xff0c;在Java中并没有对应的Reference类。 本篇文章主要是分析软引用、弱引用、…...

React 第五十五节 Router 中 useAsyncError的使用详解

前言 useAsyncError 是 React Router v6.4 引入的一个钩子&#xff0c;用于处理异步操作&#xff08;如数据加载&#xff09;中的错误。下面我将详细解释其用途并提供代码示例。 一、useAsyncError 用途 处理异步错误&#xff1a;捕获在 loader 或 action 中发生的异步错误替…...

CVPR 2025 MIMO: 支持视觉指代和像素grounding 的医学视觉语言模型

CVPR 2025 | MIMO&#xff1a;支持视觉指代和像素对齐的医学视觉语言模型 论文信息 标题&#xff1a;MIMO: A medical vision language model with visual referring multimodal input and pixel grounding multimodal output作者&#xff1a;Yanyuan Chen, Dexuan Xu, Yu Hu…...

基于uniapp+WebSocket实现聊天对话、消息监听、消息推送、聊天室等功能,多端兼容

基于 ​UniApp + WebSocket​实现多端兼容的实时通讯系统,涵盖WebSocket连接建立、消息收发机制、多端兼容性配置、消息实时监听等功能,适配​微信小程序、H5、Android、iOS等终端 目录 技术选型分析WebSocket协议优势UniApp跨平台特性WebSocket 基础实现连接管理消息收发连接…...

FastAPI 教程:从入门到实践

FastAPI 是一个现代、快速&#xff08;高性能&#xff09;的 Web 框架&#xff0c;用于构建 API&#xff0c;支持 Python 3.6。它基于标准 Python 类型提示&#xff0c;易于学习且功能强大。以下是一个完整的 FastAPI 入门教程&#xff0c;涵盖从环境搭建到创建并运行一个简单的…...

相机从app启动流程

一、流程框架图 二、具体流程分析 1、得到cameralist和对应的静态信息 目录如下: 重点代码分析: 启动相机前,先要通过getCameraIdList获取camera的个数以及id,然后可以通过getCameraCharacteristics获取对应id camera的capabilities(静态信息)进行一些openCamera前的…...

今日科技热点速览

&#x1f525; 今日科技热点速览 &#x1f3ae; 任天堂Switch 2 正式发售 任天堂新一代游戏主机 Switch 2 今日正式上线发售&#xff0c;主打更强图形性能与沉浸式体验&#xff0c;支持多模态交互&#xff0c;受到全球玩家热捧 。 &#x1f916; 人工智能持续突破 DeepSeek-R1&…...

根据万维钢·精英日课6的内容,使用AI(2025)可以参考以下方法:

根据万维钢精英日课6的内容&#xff0c;使用AI&#xff08;2025&#xff09;可以参考以下方法&#xff1a; 四个洞见 模型已经比人聪明&#xff1a;以ChatGPT o3为代表的AI非常强大&#xff0c;能运用高级理论解释道理、引用最新学术论文&#xff0c;生成对顶尖科学家都有用的…...

用机器学习破解新能源领域的“弃风”难题

音乐发烧友深有体会&#xff0c;玩音乐的本质就是玩电网。火电声音偏暖&#xff0c;水电偏冷&#xff0c;风电偏空旷。至于太阳能发的电&#xff0c;则略显朦胧和单薄。 不知你是否有感觉&#xff0c;近两年家里的音响声音越来越冷&#xff0c;听起来越来越单薄&#xff1f; —…...

C++.OpenGL (14/64)多光源(Multiple Lights)

多光源(Multiple Lights) 多光源渲染技术概览 #mermaid-svg-3L5e5gGn76TNh7Lq {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-3L5e5gGn76TNh7Lq .error-icon{fill:#552222;}#mermaid-svg-3L5e5gGn76TNh7Lq .erro…...

基于Java+MySQL实现(GUI)客户管理系统

客户资料管理系统的设计与实现 第一章 需求分析 1.1 需求总体介绍 本项目为了方便维护客户信息为了方便维护客户信息&#xff0c;对客户进行统一管理&#xff0c;可以把所有客户信息录入系统&#xff0c;进行维护和统计功能。可通过文件的方式保存相关录入数据&#xff0c;对…...