Web存储

目录

什么是 HTML5 Web 存储?

方法

webStorage

会话存储 sessionStorage

本地存储localStorage


什么是 HTML5 Web 存储?

使用HTML5可以在本地存储用户的浏览数据。

早些时候,本地存储使用的是 cookie。但是Web 存储需要更加的安全与快速. 这些数据不会被保存在服务器上,但是这些数据只用于用户请求网站数据上.它也可以存储大量的数据,而不影响网站的性能.

数据以 键/值 对存在, web网页的数据只允许该网页访问使用。

方法

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="https://cdn.bootcdn.net/ajax/libs/js-cookie/3.0.2/js.cookie.js"></script>
</head>
<body><script>console.log(Cookies)// 存数据Cookies.set('no','web201');Cookies.set('name','jamie');</script>
</body>
</html>

这个页面我们先不关闭,再来创建一个html网页,使用cookie存储数据,打开第二个页面

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="https://cdn.bootcdn.net/ajax/libs/js-cookie/3.0.2/js.cookie.js"></script>
</head>
<body><script>console.log(Cookies)// 存数据Cookies.set('gender','male');</script>
</body>
</html>

我们发现cookie中两个网页的存储信息都能得到,可以得出cookie存储的特点为:

产生于服务器,保存在客户端,同一服务器的cookie数据是共享的,数据最大不超过4KB

webStorage

会话存储 sessionStorage

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><script>// 存数据 属性名  属性值sessionStorage.setItem('name','larry');sessionStorage.setItem('age',18);// 取数据console.log(sessionStorage.getItem('name'));// 删数据sessionStorage.removeItem('age');// 一次性删除全部会话存储//sessionStorage.clear();</script>
</body>
</html>

   

我们关闭网页后,将存数据的两行代码注释掉(不注释得话再次打开网页相当于又存数据),再次打开网页,可以发现数据已经没了

会话存储的特点为:针对于选项卡和浏览器,当选项卡和浏览器关闭时,会话就失效,数据可以达到5-10MB

本地存储localStorage

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><script>// 本地存储localStorage.setItem('name','jamie');localStorage.setItem('age','20');// vuex 如何进行持久化存储 永久化存储console.log(localStorage.getItem('name'));localStorage.removeItem('age')// 删除全部// localStorage.clear()</script>
</body>
</html>

我们关闭网页后,将存数据的两行代码注释掉(理由同上),再次打开网页,发现数据还是存在。

本地存储的特点为:将数据存储到本地,即使关闭浏览器和选项卡数据依然存在,除非手动删除,数据可以达到5-10MB

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

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

相关文章

下单时如何保证数据一致性?

原创 哪吒 哪吒编程 2023-09-07 08:03 发表于辽宁 收录于合集#Redis11个 &#xff08;给哪吒编程加星标&#xff0c;提高Java技能&#xff09; 大家好&#xff0c;我是哪吒。 在前几篇文章中&#xff0c;提到了Redis实现排行榜、Redis数据缓存策略&#xff0c;让我们对Redis…

Golang 获取本地 IP 地址方法

在 Golang 中&#xff0c;使用 net 包可以很方便地获取到本机IP地址。 借助 net.InterfaceAddrs 方法 简单示例代码如下&#xff1a; package mainimport ("fmt""net" )func main() {addrList, err : net.InterfaceAddrs()if err ! nil {panic(err)}for…

VSCode学习笔记一:添加代码模板

一目了然 1 简述2 设置模板3 Global Snippets file示例 1 简述 问&#xff1a;为什么要设置代码模板&#xff1f; 答&#xff1a;编程语言是有个性的&#xff0c;不同语言的演讲风格是不一样的。 旁白&#xff1a;我不懂&#xff1f;&#xff01; 问&#xff1a;为什么要设置…

OpenPose

OpenPose Doc - Installation - Prerequisites

qt作业day4

//clock_exercise.cpp#include "clock_timer.h" #include "ui_clock_timer.h"//时间事件处理函数 void Clock_Timer::timerEvent(QTimerEvent *event) {if(event->timerId() time_id){sys_tm QDateTime :: currentDateTime(); // int year sy…

【c++】如何有效地利用命名空间?

​ &#x1f331;博客主页&#xff1a;青竹雾色间 &#x1f618;博客制作不易欢迎各位&#x1f44d;点赞⭐收藏➕关注 ​✨人生如寄&#xff0c;多忧何为 ✨ 目录 前言什么是命名空间&#xff1f;命名空间的语法命名空间的使用避免命名冲突命名空间的嵌套总结 前言 当谈到C编…

直播APP源码搭建:核心的服务器系统

在现代科技的推动下&#xff0c;网络衍生出了各种各样的技术&#xff0c;每个技术都被应用到需要的APP上&#xff0c;直播APP源码搭建出来的APP就是其中的一个&#xff0c;然而&#xff0c;这些技术能够成功的在直播APP源码搭建的APP中稳定的为用户们提供功能与服务&#xff0c…

芯科蓝牙BG27开发笔记-新建示例工程

此笔记的必要性 芯科的官方资料很丰富&#xff0c;并且ssv5中能方便索引到所需文档&#xff0c;不过大而全的问题就是找不到合适的切入点&#xff0c;更不会有本地化比较好的中文的系统的教程了。往往看到一个starting guide&#xff0c;会延伸其他starting guide&#xff0c;…

【Linux】Epoll Reactor【反应堆】模式的工作流程

Reactor模式的工作流程 主线程往epoll内核事件表中注册socket上的就绪事件。主线程调用epoll_wait等待socket上有数据可读。当socket上有数据可读时&#xff0c;epoll_wait通知主线程。主线程将socket可读事件放入请求队列。睡眠在请求队列上的某个工作线程被唤醒&#xff0c;…

ubuntu设置sudo免密

前提&#xff1a;有root权限 本质是修改/etc/sudoers 文件&#xff0c;但直接编辑这个文件容易改错造成系统异常&#xff0c;因此一般使用sudo visudo命令修改&#xff0c;这个命令保存时会检查文件格式&#xff0c;该命令会使用默认文本编辑器把/etc/sudoers 读到一个临时文件…

2023数学建模国赛C题思路--蔬菜类商品的自动定价与补货决策

C 题 蔬菜类商品的自动定价与补货决策 在生鲜商超中&#xff0c;一般蔬菜类商品的保鲜期都比较短&#xff0c;且品相随销售时间的增加而变差&#xff0c; 大部分品种如当日未售出&#xff0c;隔日就无法再售。因此&#xff0c;商超通常会根据各商品的历史销售和需 求情况每天进…

Android MediaRecorder录音

1. 简介 在android中录制音频有两种方式&#xff0c;MediaRecorder和AudioRecord。两者的区别如下&#xff1a; MediaRecorder 简单方便&#xff0c;不需要理会中间录制过程&#xff0c;结束录制后可以直接得到音频文件进行播放&#xff1b;录制的音频文件是经过压缩的&#…

如何使用TensorFlow完成线性回归

线性回归是一种简单的预测模型&#xff0c;它试图通过线性关系来预测目标变量。在TensorFlow中&#xff0c;我们可以使用tf.GradientTape来跟踪我们的模型参数的梯度&#xff0c;然后用这个信息来优化我们的模型参数。 以下是一个简单的线性回归的例子&#xff1a; pythonimpo…

vulkan学习路径

1.学习路径 了解图形渲染基础知识&#xff1a; 学习计算机图形学基础概念&#xff0c;包括坐标系统、三角形渲染、光照模型等。可以参考经典的图形学教材&#xff0c;如《Real-Time Rendering》和《Computer Graphics: Principles and Practice》。了解图形API的发展历史&#…

用户多设备多账户同时在线场景、匿名用户行为同步到注册用户

随着移动设备的普及和社交媒体的发展,用户在多个设备上同时访问同一个应用成为了一种常见的现象。这些设备可能属于同一个用户,也可能属于不同的用户,而且有些用户可能没有注册账户,只是以匿名的方式访问应用。在这种多设备、多账户、匿名用户同时在线的场景下,如何保证数…

Docker从认识到实践再到底层原理(四-2)|Docker镜像仓库实战案例

前言 那么这里博主先安利一些干货满满的专栏了&#xff01; 首先是博主的高质量博客的汇总&#xff0c;这个专栏里面的博客&#xff0c;都是博主最最用心写的一部分&#xff0c;干货满满&#xff0c;希望对大家有帮助。 高质量博客汇总 然后就是博主最近最花时间的一个专栏…

污水处理厂3D数字孪生三维可视系统降低设备风险隐患

当相对传统与保守的水务行业&#xff0c;与激进与开放的互联网发生碰撞之后&#xff0c;产生了最好的一个名词是&#xff1a;“智慧水务”&#xff0c;谈及智慧水务&#xff0c;自然免不了当下最具热度的技术“元宇宙”&#xff0c;水资源再生是我国追求高质量发展的新策略&…

软件测试/测试开发丨Selenium Web自动化多浏览器处理

点此获取更多相关资料 本文为霍格沃兹测试开发学社学员学习笔记分享 原文链接&#xff1a;https://ceshiren.com/t/topic/27185 一、多浏览器测试介绍 1.1、多浏览器测试背景 用户使用的浏览器(firefox,chrome,IE 等)web 应用应该能在任何浏览器上正常的工作&#xff0c;这样…

springboot整合elasticsearch使用案例

引入依赖 <dependency><groupId>org.elasticsearch.client</groupId><artifactId>elasticsearch-rest-high-level-client</artifactId> </dependency> 添加注入 import org.apache.http.HttpHost; import org.elasticsearch.client.Res…

2594. 修车的最少时间

文章目录 Tag题目来源题目解读解题思路方法一&#xff1a;二分枚举答案 写在最后 Tag 【二分枚举答案】【数组】 题目来源 2594. 修车的最少时间 题目解读 给你一个表示机械工能力的数组 ranks&#xff0c;ranks[i] 表示第 i 位机械工可以在 r a n k s [ i ] ∗ n 2 ranks[…