程序员经验分享-hwhale

【HTML】不来看看HTML5的WebStorage吗

2023-11-10

【HTML】不来看看HTML5的WebStorage吗

面试官：讲讲sessionStorage和localStorage的区别？

回答：en～，一个有限制，一个无？

技术选型：做一个离线数据的缓存！

回答：好像都能实现，随便用？

引言

内容速递：看了本文您能了解到的知识！

WebStorage

1、什么是 HTML5 Web 存储

它是一种可以在本地存储用户的浏览数据的一种技术。

主要的目的是克服由cookie所带来的一些限制，当数据需要被严格控制在客户端时，不需要持续的将数据发回给到服务器，那么这时就会使用WebStorage。

2、WebStorage两个主要目标

提供一种在cookie之外存储会话数据的路径。

提供一种存储大量可以跨会话存在的数据的机制。

3、Web Storage

WebStorage.drawio

HTML5提供了两个客户端存储数据的两个对象：

  • sessionStorage 为每一个给定的源（given origin）维持一个独立的存储区域，该存储区域在页面会话期间可用（即只要浏览器处于打开状态，包括页面重新加载和恢复）。
  • localStorage 同样的功能，但是在浏览器关闭，然后重新打开后数据仍然存在。

4、sessionStorage

用于临时保存同一窗口(或标签页)的数据，在关闭窗口或标签页之后将会删除这些数据。

4.1、特性

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

http://example.com 与 https://example.com 的 sessionStorage 相互隔离

4.2、API

  • 保存数据：sessionStorage.setItem(key,value);
  • 读取数据：sessionStorage.getItem(key);
  • 删除单个数据：sessionStorage.removeItem(key);
  • 删除所有数据：sessionStorage.clear();
  • 得到某个索引的key：sessionStorage.key(index);

5、localStorage

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

5.1、特性

  • 存储的数据不会随着用户浏览时会话过期而过期，但会应用户的请求而删除
  • 浏览器也因为存储空间的限制或安全原因而删除
  • 存储的数据可以同一个浏览器的多个窗口共享

只能存储字符串，如果是json对象的话，可以将对象JSON.stringify() 编码后存储

5.2、API

  • 保存数据：localStorage.setItem(key,value);
  • 读取数据：localStorage.getItem(key);
  • 删除单个数据：localStorage.removeItem(key);
  • 删除所有数据：localStorage.clear();
  • 得到某个索引的key：localStorage.key(index);

6、sessionStorage与localStorage的差异

1、生命周期

localStorage的生命周期是永久的，关闭页面或浏览器之后localStorage中的数据也不会消失。localStorage除非主动删除数据，否则数据永远不会消失。

sessionStorage的生命周期是在仅在当前会话下有效。sessionStorage引入了一个“浏览器窗口”的概念，sessionStorage是在同源的窗口中始终存在的数据。只要这个浏览器窗口没有关闭，即使刷新页面或者进入同源另一个页面，数据依然存在。但是sessionStorage在关闭了浏览器窗口后就会被销毁。同时独立的打开同一个窗口同一个页面，sessionStorage也是不一样的。

2、存储大小

localStorage和sessionStorage的存储数据大小一般都是：5MB。

3、存储位置

localStorage和sessionStorage都保存在客户端，不与服务器进行交互通信。

4、存储内容类型

localStorage和sessionStorage只能存储字符串类型，对于复杂的对象可以使用ECMAScript提供的JSON对象的stringify和parse来处理。

7、WebStorage的优点

注意：这里是WebStorage同cookie相比。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-jtOwtFwk-1663234330410)(https://guizimo.oss-cn-shanghai.aliyuncs.com/img/WebStorage%E7%9A%84%E4%BC%98%E7%82%B9.drawio.png)]

1、存储空间更大

cookie为4KB，而WebStorage是5MB。

2、节省网络流量

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

3、便捷性

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

4、安全性

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

8、总结

sessionStorage和localStorage的使用越来越多了，也慢慢成为一种必备的前端知识了。更多详细的用法还是需要在日常工作中去提炼和加深印象，本文最大的作用还是温故知识，查漏补缺！

既然看到了这里，我正在重构前端知识体系，你要一起吗？

系列好文

HTML历史：【HTML】你还会来看HTML吗？带你重温亦或走进

HTML标签：【HTML】带你重忆HTML那些记忆模糊的标签

HTML视频：【HTML】讲讲HTML5视频播放的方式

HTML音频：【HTML】HTML5给网页音频带来的变化

HTML语义化：【HTML】讲讲对HTML5的语义化的理解

HTML定位：【HTML】HTML5的新特性Geolocation

HTML拖放：【HTML】HTML5的拖放你用了吗

HTML缓存：【HTML】不来看看HTML5的WebStorage吗

HTML应用缓存：【HTML】HTML5的应用程序缓存

HTML的Web Werkors：【HTML】HTML5的Web Werkors

博客说明与致谢

文章所涉及的部分资料来自互联网整理，其中包含自己个人的总结和看法，分享的目的在于共建社区和巩固自己。

引用的资料如有侵权，请联系本人删除！

感谢万能的网络，W3C，菜鸟教程等！

感谢勤劳的自己，博客，GitHub学习，GitHub

如果你感觉对你有帮助的话，不妨给我点赞鼓励一下，好文记得收藏哟！关注我一起成长！

幸好我在，感谢你来！

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

重构前端知识体系

​重构前端知识体系（HTML）

前端

html5

html

【HTML】不来看看HTML5的WebStorage吗 的相关文章

  • 如何对多行文本中的每一行应用填充？

    我已将背景颜色应用于 span 标签 也有左和右padding设置在它上面 问题是 padding仅适用于左侧 开始 和右侧 结束 span 而不是当文本换行时每行的左侧 开始 和右侧 结束 我该如何应用左和右padding to the

  • 如果选中复选框则显示 div

    我正在尝试构建类似 WordPress 选项的东西 用于在创建文章时切换字段可见性 我所构建的依赖于 click函数使用相应的字段名称切换父项 我想知道如果选中该复选框 执行此操作的最佳方法是什么 因为如果您选中一个框并重新加载页面 因为它

  • 减小 TinyMCE 文本区域中的行间距

    I am using TinyMCE to provide a rich text editing text editor But the line spacing between the lines is too much I have

  • 区分 NaN 输入和输入类型为“number”的空输入

    我想使用 type number 的表单输入 并且只允许输入数字

  • vb.net HtmlAgilityPack 在 div 之后插入字符串

    我试图在 div 末尾直接插入一些我自己的 html 这个 div 里面有其他 div Dim HtmlNode As HtmlNode HtmlNode CreateNode span class Those were the frien

  • 有没有办法改变输入类型=“日期”格式？

    默认情况下 输入type date 显示日期为YYYY MM DD 问题是 是否可以将其格式强制为 DD MM YYYY 无法更改格式 我们必须区分有线格式和浏览器的表示格式 接线格式 The HTML5日期输入规范 https www w

  • Chrome 浏览器不显示 HTTP 处理程序生成的图像

    基本上我有一个网站 可以呈现一些文档 主要是办公室 的 HTML 预览 生成的 HTML 片段包含在同一网站返回的页面中 但图像由 HTTP 处理程序从具有以下链接的另一个网站返回 img width 50 height 50 src ht

  • 滚动时输入自动完成位置错误（chrome）

    我在输入文本的默认自动完成功能方面遇到了一些麻烦 滚动时它不会相应移动 我希望自动完成文本保留在输入的正下方 有办法做到这一点吗 我在 Chrome 浏览器版本 57 0 2987 133 中发生这种情况 fiddle https jsfi

  • 有没有办法禁用网站上表单的自动填写？ [复制]

    这个问题在这里已经有答案了 我最近才学会使用创建网站HTML and PHP 我创建了一个网站 其中有一个测验 要求人们随机翻译单词 用户将他们的答案输入到表格中 网站评估答案是否正确 现在 当一个问题在一个会话中被问两次时 就会出现自动填

  • CSS3DObject 始终位于 WebGL Mesh 前面

    我正在混合CSS3D Renderer with WebGL Renderer to add HTML3D 空间中的元素WebGL场景 这CSS3DObject在前面WebGL网格即使WebGL Renderer具有较高的 z index

  • 如何向我的网站添加 Google 搜索框？

    我正在尝试将 Google 搜索框添加到我自己的网站 我希望它搜索谷歌本身 而不是我的网站 我曾经有一些代码可以工作 但现在不再工作

  • 如何在 font Awesome 图标链接下方添加添加文本？

    我正在尝试在我的 Blogger 模板中的 font awesome Icons 下添加一些文本 这是我想要实现的目标的图像 我想要实现的外观图片 https i stack imgur com BVYlh png 但到目前为止我已经做到了

  • 如何使用 Angular JS 单击时将 html 模板附加到 div/指令？

    我有这种情况

  • 如何在php中使用preg添加html属性

    我正在寻找在 php 中编写一个脚本来扫描 html 文档并根据它找到的内容向元素添加新标记 更具体地说 我是扫描文档并为每个元素搜索CSS标记 float right left 如果找到它 它会添加align right left 基于它

  • 禁用特定 div 上的 Tab 键

    我有以下结构 div div Some content div div Some content div div 我想 禁用 div2 上的 tab 键 我的意思是按下 tab 键时 div2 的元素不会获得焦点 有没有简单的方法可以使用

  • HTML 元素的默认背景颜色是什么？白色还是透明？

    我只是被一个简单的问题困住了 想弄清楚 HTML 元素的默认背景颜色是什么 是白色的还是透明的 默认背景颜色是透明的 看这里 https developer mozilla org en docs Web CSS background co

  • Knockout.js 安全绑定

    我想使用带有淘汰赛的安全绑定 为此我使用敲除安全绑定 js https github com brianmhunt knockout secure binding 谁能解释一下为什么下面的代码不起作用 它会抛出一个错误 未捕获 淘汰 安全

  • 如何让div与包含td的高度相匹配？

    我沿着桌子的一排布置了三个 面板 一个比另外两个高 我希望所有三个面板都与最高的一个的高度相匹配 我尝试将 div 的样式设置为 height 100 但是即使包含的 tds 增长 短面板仍然很短 我的 HTML 是由 JSF 生成的 因此

  • 元素和 svg 形状之间的白线

    大家好 我正在使用由 shapedivider 生成的 svg 整形器 您可以看到 有一条白线 我不知道为什么它在那里以及如何删除它 请你帮助我好吗 有形状分隔符的代码 custom shape divider bottom 1640714

  • 从输入类型编号获取无效值

    我正在使用输入类型数字 当它无效时 我如何从中获取值 例如 使用类型编号并仅打印 e 这本身是无效的 我正在使用 React 但我认为这个问题非常普遍 onChange event console log event target valu

随机推荐

  • 干货分享｜UKUI 主题框架实战技巧

    UKUI 主题框架的实现并非想象中那么简单 但世上无难事只怕有心人 首先咱们需要了解一个关键接口 QPA 接着通过学习具体的类了解如何创建并深入使用平台主题 本文中奇奇为大家准备了丰富的控件知识介绍 并且还有 UKUI 实例展示和实战环节

  • 【C++】全局变量、静态变量、局部变量的生存周期与作用域

    全局变量 静态变量 局部变量的生存周期与作用域 1 生存周期和作用域的定义1 生存周期 变量从定义到销毁的时间范围 存放在全局数据区的变量的生存周期存在于整个程序运行期间 而存放在栈中的数据则随着函数等的作用域结束导致出栈而销毁 除了静态变

  • 用verdi trace代码 auto trace和trace X

    verdi可以方便的trace代码 常见的操作如下 1 拖拽 可以将代码窗口选中的信号拖拽到波形窗口 查看波形 拖拽波形窗口选中的信号到代码窗口 代码自动跳转到选中信号 两个verdi同时打开同一份代码的不同仿真波形 可以在一个verdi波

  • C++知识点 -- vector模拟实现

    C 知识点 vector模拟实现 文章目录 C 知识点 vector模拟实现 一 vector 1 整体结构 2 构造及析构函数 3 capacity和size 4 重载 5 reserve 5 push back和pop back 6 迭

  • unity期末作业-两个简单小游戏游戏-躲避障碍和跑酷（附下载链接和gif动态图演示）

    unity期末两个课设游戏项目 1 简单躲避障碍小游戏游戏 2 unity期末跑酷游戏 1 简单躲避障碍小游戏游戏 游戏角色为一个小人 天上不时会掉落障碍物 人物撞到了会掉生命值 人物可以左右移动跳跃来躲避 带游戏音效 比较简单 具体情况如

  • 推荐一款好用的redis客户端工具

    推荐一款好用的redis客户端工具 redis官方客户端 redis cli 每次都要指定连接IP与端口 连接成功后还要执行auth命令进行口令认证 这个过程比较繁琐 auth命令需要人工干预 不方便自动化执行redis命令 给大家推荐一款

  • 【华为OD机试】GPU算力【2023 B卷

    华为OD机试 真题 点这里 华为OD机试 真题考点分类 点这里 题目解析 为了充分发挥GPU算力 需要尽可能多的将任务交给GPU执行 现在有一个任务数组 数组元素表示在这1秒内新增的任务个数且每秒都有新增任务 假设GPU最多一次执行n个任务

  • MySQL8.0忘记密码重置账户

    好久没用MySQL 发现忘记密码 大概试了三种方法 记录下尝试的过程 方法一 失败 参考ERROR 1045 28000 Access denied for user root localhost using password NO 解决办

  • linux 脚本返回值

    linux 脚本返回值 简单版本 1 创建一个脚本a 内容如下 bin sh filename a exit 22 2 创建一个c语言程序1 C 调用该脚本 通过system的返回值来判断是否执行脚本成功 include

  • Unused import statement

    Unused import statement 未使用的导入语句 File菜单 invalidate caches restart选项 点击即可

  • V-REP仿真之Python读取关节当前角度和驱动ur机械臂关节旋转

    V REP仿真之Python读取关节当前角度和驱动ur机械臂关节旋转 在建立与机械臂的通信之后 接着需要读取和驱动ur机械臂的关节角度 代码如下 coding UTF 8 import sim import time import sys

  • 2018看得见的未来：人工智能何去何从？

    2018看得见的未来 系列报道现在继续 本期重磅推出由云报和O Reilly Media共同策划的2018人工智能发展趋势 本系列报道将邀请内业的重量级厂商 专家 大咖 一起畅想2018年IT领域的大事小情 热点焦点 也欢迎有兴趣的厂商都参

  • el-upload自定义上传文件显示进度条

    el upload自定义上传文件时需要显示进度条 但使用http request会覆盖默认的上传行为 on progress也就不生效了 所以可以自定义上传的实现 效果图 功能实现 按钮

  • 微信小程序根据经纬度查看地图

    var longitude 101 234567 var latitude 202 123456 wx openLocation longitude Number longitude 经度或纬度必须是number类型 latitude Nu

  • linux关闭防火墙和打开防火墙

    永久打开或则关闭 chkconfig iptables on chkconfig iptables off 即时生效 重启后还原 service iptables start service iptables stop

  • XXX.axf: Error: L6218E: Undefined symbol xxx (referred from xxxx.o).

    MKD 报错 linking LCD axf Error L6218E Undefined symbol EnZK referred from ht128x64 o LCD axf Error L6218E Undefined symbol

  • 【shell】 =~的使用

    如下 read p need compile OEM installatoin package yes no IS OEM if z IS OEM then IS OEM No fi if Yes IS OEM yes IS OEM the

  • win10配置 tesseract 中文字符识别

    下载win10下的tesseract的安装包 https digi bib uni mannheim de tesseract 下载后双击进行安装 这里因为我们要识别中文字符 所以在安装界面中需要进行额外的语言勾选 展开Additional

  • centos7清理yum源

    1 删除起始的源 cd etc yum repos d rm f echo delete error 2 卸载yum rpm qa grep yum xargs I rpm e nodeps 3 下载最新的yum程序的rpm包 http m

  • 【HTML】不来看看HTML5的WebStorage吗

    HTML 不来看看HTML5的WebStorage吗 面试官 讲讲sessionStorage和localStorage的区别 回答 en 一个有限制 一个无 技术选型 做一个离线数据的缓存 回答 好像都能实现 随便用 引言 内容速递 看了

热门标签