首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何为两个独立的函数设置本地存储(暗光模式)

为两个独立的函数设置本地存储(例如暗光模式),可以使用浏览器的 localStorage API。以下是一个详细的步骤和示例代码:

基础概念

  1. 本地存储(Local Storage)localStorage 是一种在客户端存储数据的机制,数据不会过期,除非被显式删除。
  2. 暗光模式(Dark Mode):一种用户界面主题,通常使用深色背景和浅色文字,以减少屏幕亮度对眼睛的刺激。

相关优势

  • 持久性:数据存储在客户端,不会因为页面刷新或关闭而丢失。
  • 简单易用localStorage 提供了简单的 API 来存储和检索数据。
  • 跨会话保持状态:即使用户关闭浏览器并重新打开,存储的数据依然存在。

类型

  • 字符串存储localStorage 只能存储字符串类型的数据,但可以通过 JSON.stringifyJSON.parse 来存储和读取复杂对象。

应用场景

  • 用户偏好设置:如暗光模式、语言选择等。
  • 缓存数据:减少服务器请求,提高应用性能。

示例代码

假设我们有两个独立的函数 setDarkModegetDarkMode 来管理暗光模式的设置。

代码语言:txt
复制
// 设置暗光模式
function setDarkMode(enabled) {
  localStorage.setItem('darkMode', enabled ? 'true' : 'false');
}

// 获取暗光模式状态
function getDarkMode() {
  const darkMode = localStorage.getItem('darkMode');
  return darkMode === 'true';
}

// 示例使用
document.getElementById('toggleDarkMode').addEventListener('click', () => {
  const isEnabled = getDarkMode();
  setDarkMode(!isEnabled);
  updateUI(!isEnabled);
});

function updateUI(isDarkMode) {
  const body = document.body;
  if (isDarkMode) {
    body.classList.add('dark-mode');
  } else {
    body.classList.remove('dark-mode');
  }
}

// 初始化UI状态
document.addEventListener('DOMContentLoaded', () => {
  updateUI(getDarkMode());
});

CSS 样式

为了使暗光模式生效,需要在 CSS 中定义相应的样式:

代码语言:txt
复制
body.dark-mode {
  background-color: #121212;
  color: #ffffff;
}

解决常见问题

  1. 数据未保存:确保在设置 localStorage 时没有抛出异常,可以使用 try-catch 块来捕获和处理错误。
  2. 数据读取错误:在读取 localStorage 数据时,确保进行了类型转换和错误处理。
代码语言:txt
复制
function getDarkMode() {
  try {
    const darkMode = localStorage.getItem('darkMode');
    return darkMode === 'true';
  } catch (error) {
    console.error('Failed to read dark mode from localStorage', error);
    return false; // 默认值
  }
}

通过这种方式,你可以为两个独立的函数设置和管理本地存储中的暗光模式状态,并且确保在各种情况下都能正确地读取和应用这些设置。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

图像伽马校正_自动梯形校正

传递函数包括两部分 光转电传递函数(OETF),把场景线性光转到非线性视频信号值。 电转光传递函数(EOTF),把非线性视频信号值转到显示光亮度。...二、为什么用Gamma校正 概括 1、和人眼的特性有关 人眼对暗部的变化感应更敏感 2、非线性转换为了优化存储空间和带宽 我们用于显示图像数据都是8bit,要充分利用带宽,就需要使用更多位置去存储暗部值...伽马2.2的存在和显示器本身没有任何因果关系,伽马2.2是为了让8位图 有限的存储空间可以表达适合人眼的色彩感知特性而不产生色彩断层(因为人眼对亮部和暗部的感知是非线性的,对暗部更敏感),伽马2.2的目的是将有限的色彩信息存储空间更多地留给暗部...(可以在它的工作空间 的设置中进行更改,选择用灰度系数混合RGB颜色,参数设置为一,这样图层才是一个最终直接混合的结果 unity设置中修改 Linear空间 Gamma空间 参考资料...本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

1.5K20

从今天开始,用对 Android 新老 Camera APIs

一般相机有如下 4 种测光模式(更详细的介绍见 附录 2): 中央重点测光 局部测光(包括:中央部分测光) 点测光 评价测光(或称分割测光/矩阵测光/多分区测光 在 Android 手机上,是没有硬件接口设置测光模式的...尝试了几台手机,发现不同机型这两个 API 的实现区别非常大,如: Google 原生机 Pixel XL 和华为荣耀9 最多可以设置 1 个测光区域,而小米4 则支持 5 个; 调用setMeteringArea...()方法设置测光区域为全屏,在华为荣耀9 机器上采用的是中央重点测光(拍摄内容为:黑色背景上放置一块白色横条,当白色横条在屏幕上部或下部时,得到的照片会比纯黑背景上暗,横条置于屏幕中部则为最暗的);在乐视...在手动模式下,由使用者自行设置这两个参数;而在自动曝光模式下,设备根据使用者指定的 Exposure Compensation 值,自行计算并选择合适的 ISO 和 Exposure Time 组合。...由此可见,如果想更大限度地调节照片亮度,如极暗环境下的拍摄,那么关闭自动曝光模式,对 ISO 和 Exposure Time 分别进行调整还是很有必要的。

7.9K126
  • 为什么RGB 与 CMYK的差异,会有所不同?

    RGB 与 CMYK 有什么区别 RGB 颜色模式用于设计网站和电视等数字通信。CMYK 颜色模式用于设计印刷通讯,如名片和海报。 这只是简单的区别。...因此,任何为屏幕设计的东西——从智能手表到超大屏幕——都应该以 RGB 颜色模式设计。 屏幕显示数百个像素的图像。这些像素中的每一个都有三个子像素:红光、绿光和蓝光。...在 CMYK 模式下将颜色加在一起对结果的影响与 RGB 相反;添加的颜色越多,结果越暗。因此,颜色会被去除或减去,以创造出明亮的效果。...例如,要使 CMYK 颜色为白色,应将这些值输入到设计软件中: C: 100% M: 100% Y: 100% K: 100% 有趣的是,将 CMY 设置为 0% 并将 K 设置为 100% 并不会产生最深的黑色...RGB 是用于屏幕显示的颜色模式。 在 CMYK 模式下添加的颜色越多,结果越暗。添加到 RGB 的颜色越多,结果越亮。 CMYK 的数值范围为 4x100;RGB 的数值范围为 3x256。

    1.8K20

    IT知识百科:什么是暗光纤?“暗”代表何意?

    这种全内反射的原理使光信号可以在光纤中传输数百甚至数千千米而不衰减。 光信号可以编码成不同的模式,通常使用光的亮度(强度)或相位(波形形状)来表示数据。...3.6 小型蜂窝和分布式天线系统(DAS) 新型无线网络基础设施,如小型蜂窝和分布式天线系统(DAS),也在推动暗光纤市场的需求。...企业网络: 许多企业需要可靠的、高速的网络连接,以支持其日常业务。城域光纤提供了满足这些需求的解决方案。 结构与特点 城域光纤通常采用多模光纤,这种光纤具有较大的玻璃芯,允许多种光传输模式。...这些光纤具有较小的玻璃芯,仅允许一种光传输模式。这限制了一次可以传输的数据量,但没有明显的距离限制。 长途光纤的结构更专注于长距离传输,而不是多样性的路线选择。...6.4 更高水平的弹性和安全性 另一个暗光纤的好处是提供了更高水平的弹性和安全性。相比于共享连接的传统ISP选项,暗光纤为企业提供了独立的、私有的网络连接。

    86320

    opengL ES _ 入门_05

    OpenGL 光照模型,把光分为4种独立的成分:环境光,反射光,镜面光,发射光。 下面就来解释一下四种光的含义和作用。 环境光: 在环境中充分的散射,无法辨别其方向的光,似乎来自于所有的方向。...散射光:来自某个方向,如果它从正面照射,他可能看起来更亮一下,如果他斜着掠过表面,看其他则会暗一些,来自某个特性的位置或者方向的任何光很可能具有散射的成分。 朗伯体光照模型: ?...松散的意思是,在许多现实世界的材料,实际表面可能有点抛光,但半透明的,而层立即下执行散射。材料,如这可能有强烈的漫反射和镜面反射成分。...glLightfv()函数指定光源的位置,如果使用不同颜色的光,使用glLight*()函数修改 场景中至少可以包含八个光源,除了GL_LIGHT0 之外的其他光源的颜色都为黑色。...glEnable() 参数GL_LIGHTING 光源的几个重要属性:颜色,位置,和方向 两个重要函数: glLight(GLenum light,Glenum pname,TYPE para),

    63930

    基础渲染系列(十七)——混合光照

    (混合光照 烘焙间接光) 在上一教程中,我们已经切换到了这种模式,但是那时我们仅使用完全烘焙的灯光。结果,混合照明的模式没有任何变化。要使用混合照明,必须将光源的“Mode”设置为“Mixed”。...(主光源的混合模式) 将主定向光转换为混合光后,将发生两件事。首先,Unity将再次烘焙光照贴图。但这次,它仅存储间接光照,因此生成的光照贴图会比以前更暗。 ? ?...(两个定向光下不正确的淡化效果) Unity的标准着色器也存在此问题,至少在版本5.6.2和2017.1.0f1之前。然而,这不是光映射引擎的问题。...(在两个定向光下 正确的衰减) 完全依靠UNITY_LIGHT_ATTENUATION是个好主意吗? 宏代码已稳定很长时间了。一直以来,都是与Unity自定义着色器的照明设置配合使用的最佳方法。...阴影区域不应比该颜色更暗,但它们可以更亮。因此,请充分利用计算出的光线和阴影颜色的最大值。 ? 我们还必须考虑将阴影强度设置为低于1的可能性。

    2.7K40

    Camera2 Extensions

    :美颜能力,如磨皮、脸部肤色轮廓修饰等,Android13开始废弃 EXTENSION_FACE_RETOUCH:美颜能力,如磨皮、脸部肤色轮廓修饰等;Android13开始提供,其实就是上面的BEAUTY...,比如拍照时使用不同的AE配置,让高光区域不过曝,暗光区域不欠曝以达到最佳成片效果 EXTENSION_NIGHT:夜景算法,可在暗光条件下抑制噪点以提升图像质量 以EXTENSION_HDR(高动态范围...)为例,可以看到右侧生效HDR效果的图像,左下角暗光区域的椅子和石头还是可以看清的,顶部区域太阳周围的过曝区域的处理也非常不错 (EXTENSION_HDR) 使用流程 查询设备支持哪些扩展能力通过...,步骤和Camera2普通模式启动预览流程是类似的,三步走即可,只是一些接口不同 打开相机的步骤和Camera2普通模式无差异 创建会话则采用createExtensionSession 获取CameraExtensionSession...其余key设置将无效,被特定extension mode底层的参数覆盖 最后 Camera Extensions的设计对于第三方影像开发者来说肯定是非常好的,不过手机厂商近几年也都在大力发展自己特有的

    1.9K40

    中科大提出PE-YOLO | 让YOLO家族算法直击黑夜目标检测

    而在实际环境中,往往存在许多恶劣的光照条件,如夜晚、暗光和曝光不足,导致图像质量下降,从而影响了检测器的性能。...视觉感知模型使得自动系统能够理解环境并为后续任务(如轨迹规划)奠定基础,这需要一个稳健的目标检测或语义分割模型。 图1是一个暗光目标检测的示例。...然而,DIP是传统的方法,如白平衡,对图像的增强效果有限。 为了解决以上问题,本文作者提出了一种金字塔增强网络(PENet),用于增强暗光图像并捕获有关目标的潜在信息。...捕捉场景中的全局信息已被证明对于低级别的视觉任务(如暗光增强)是有益的。...由于暗光增强模型缺乏检测能力,作者将使用与PE-YOLO相同的检测器对所有增强后的图像进行实验。 作者将mAP的IoU阈值设置为0.5,并且性能比较结果如表1所示。

    55630

    中科大提出PE-YOLO | 让YOLO家族算法直击黑夜目标检测

    而在实际环境中,往往存在许多恶劣的光照条件,如夜晚、暗光和曝光不足,导致图像质量下降,从而影响了检测器的性能。...视觉感知模型使得自动系统能够理解环境并为后续任务(如轨迹规划)奠定基础,这需要一个稳健的目标检测或语义分割模型。 图1是一个暗光目标检测的示例。...然而,DIP是传统的方法,如白平衡,对图像的增强效果有限。 为了解决以上问题,本文作者提出了一种金字塔增强网络(PENet),用于增强暗光图像并捕获有关目标的潜在信息。...捕捉场景中的全局信息已被证明对于低级别的视觉任务(如暗光增强)是有益的。...由于暗光增强模型缺乏检测能力,作者将使用与PE-YOLO相同的检测器对所有增强后的图像进行实验。 作者将mAP的IoU阈值设置为0.5,并且性能比较结果如表1所示。

    2K51

    刷榜13个暗光增强基准!清华大学联合ETH等开源Retinexformer:亮、暗都有细节 | ICCV 2023

    研究人员设计了一个照明引导Transformer(IGT),利用照明表示直接建模的非本地相互作用的区域与不同的照明条件,然后将IGT插入ORF以实现Retinexformer算法。...暗光增强简介 如图1所示,暗光增强的主要任务是增强低光图像的能见度和对比度,同时修复隐藏在黑暗中或由于提升亮度而引入的噪声、伪影、颜色畸变等复杂的退化模式。...图2 暗光增强任务示意图 当前的暗光增强算法大体上可以分为三类:朴素方法、传统感知方法、深度学习方法。 朴素方法一般会直接在全局范围内增强整张图像的亮度和对比度。...然而这类算法有两个缺陷:一是假定暗光图像都是干净的,不存在噪声伪影等。然而由于成像设备的缺陷,暗光图像常常带有噪声;二是这类算法依赖于手工设计的图像先验,常常需要调参且表征能力很弱。...然而这类算法大都需要一个冗长的流程,采取一个多阶段的训练方案,分别训练多个不同的 CNN 来做不同的任务,如解耦彩色图像、给反射图去噪、调整照度图等;然后将这些训好的 CNN 连接起来进行微调。

    1K20

    _基于 STM32自研多任务+SpringBoot+Vue 农业大棚智能调光系统

    我们所提出的智能灯光控制系统,能够根据当前设置的大棚所需要的光照阈值来确定是否需要进行大棚补光,并且可以根据当前光照实时改变补光强度,并且能够在客户端实时观测到当前大棚的自然光照强度和补光强度。...目前,我国在农业大棚智能补光方面仍存在许多挑战,如光源设备的能效、光环境的稳定性和多样性等方面的问题。         总的来说,农业大棚智能补光技术得到了国内外学者的广泛关注,但在国内研究相对较少。...另外还有两个内部 ADC 源和 VBAT 通道挂在 ADC1 上。ADC 具有独立模式、双重模式和三重模式,对于不同 AD 转换要求几乎都有合适的模式可选。         ...光线越强,电压越低,光线越暗,电压越高。...为什么规则要设置为上述那样呢,因为通过实践可得最暗的情况下电压值最接近3.0V,然后电压值和光照强度成反比,而我们的假设光照强度的范围为:0-100,这样就有了(300-电压值*100)/300*100

    34610

    基于 STM32自研多任务+SpringBoot+Vue 农业大棚智能调光系统

    我们所提出的智能灯光控制系统,能够根据当前设置的大棚所需要的光照阈值来确定是否需要进行大棚补光,并且可以根据当前光照实时改变补光强度,并且能够在客户端实时观测到当前大棚的自然光照强度和补光强度。...目前,我国在农业大棚智能补光方面仍存在许多挑战,如光源设备的能效、光环境的稳定性和多样性等方面的问题。         总的来说,农业大棚智能补光技术得到了国内外学者的广泛关注,但在国内研究相对较少。...另外还有两个内部 ADC 源和 VBAT 通道挂在 ADC1 上。ADC 具有独立模式、双重模式和三重模式,对于不同 AD 转换要求几乎都有合适的模式可选。         ...光线越强,电压越低,光线越暗,电压越高。...为什么规则要设置为上述那样呢,因为通过实践可得最暗的情况下电压值最接近3.0V,然后电压值和光照强度成反比,而我们的假设光照强度的范围为:0-100,这样就有了(300-电压值*100)/300*100

    38010

    ISP问题调试总结(包括黑光成像逆光成像降噪宽动态wdr偏色等问题)!

    (ViPipe,&pstStatCfg); 和 HI_MPI_ISP_SetStatisticsConfig(ViPipe,&pstStatCfg) 设置图像权重;wdr模式下还可调节曝光比和曝光时间范围...(约最高增益的1/3,如技术支持给的驱动),这样模拟增益无法达到最高导致需要调节数字增益,会引入更多噪声,所以确定驱动是否使用高增益模式,同时cmos.c中的增益表可配最大值配为与sensor最高增益一致...光线较好非逆光时,在低光优先模式下,sensor一般通过调节曝光时间即可满足目标亮度要求,如果调节曝光还不满足也只会微调ISO,一般调整ISO不超过250;光线较好逆光时,在低光优先模式下,人脸因为逆光而变黑...13、问题:人脸在整个画面中偏暗: 解决:AE设置为低光优先模式,提升HistRatioSlope值,减小MaxHistOffset值,打开DRC,更换系数较低的gamma参数表,调整曝光权重表(增加中间区域的值...14、问题:光线均匀时没有问题,明暗交替场景,暗部出现偏绿或者亮部出现偏粉: 解决:调整GAMMA暗部或者亮部的曲线,让暗部或者亮部的值拉低,调整tonemapping。

    2.9K10

    ov7725摄像头–图像中间亮四周暗

    12.5 Lens Cover—镜头盖 镜头盖是光路中最便宜的部件。 但它可能会非常影响画面质量。 镜头盖应由双面带AR涂层的光学玻璃制成。...否则,镜头盖可能会导致灵敏度损失和/或更强烈的镜头光晕。 12.6 Lens Correction—镜头校正 应该在每个模块中调整镜头校正设置。...请联系OmniVision本地FAE镜头校正调整。...我的问题应该是光脱落导致的,打开透镜的阴影矫正功能; 设置寄存器 // Lens Correction, should be tuned with real camera module...本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

    1.1K20

    音视频知识图谱 2022.11

    OpenGL 的渲染架构:OpenGL 的渲染架构是 Client/Server 模式。...OpenGL 的状态通常被称为 OpenGL 上下文(Context)。我们通常使用如下途径去更改 OpenGL 状态:设置选项,操作缓冲。最后,我们使用当前 OpenGL 上下文来渲染。...OpenGL ES 系统与本地窗口(UIKit)系统的桥接由 EAGL 上下文系统实现。...光电转换函数设计目标面向人眼的特性而非显示伽马 因为人眼对亮度感知是非线性的特点,我们可以用更多的码率来编码人眼敏感的中等亮度或暗部细节,从而使得编码在讨好人眼上有更好的 ROI。...转换到 BT.709 3、HDR 线性光信号色调映射为 SDR 线性光信号(Tone Mapping) 4、SDR 线性光信号转 SDR 非线性电信号(OETF) ---- 下面是 2022.11 月的知识图谱新增内容快照

    95330

    Unity通用渲染管线(URP)系列(十二)—— HDR(Scattering and Tone Mapping)

    在此模式下,(0,0,0)代表黑色,(1,1,1)代表白色。尽管我们的着色器可能会产生超出此范围的结果,但GPU会在存储它们时限制颜色,就好像我们在每个片段函数的末尾使用了饱和一样。...同样,RGB通道存储在sRGB色彩空间中。当我们在线性色彩空间中工作时,GPU在读取和写入缓冲区时会自动在两个空间之间进行转换。渲染完成后,缓冲区将发送到显示器,后者将其解释为sRGB颜色数据。...可以将其设置为Off或Use Graphics Settings。 ? (相机的HDR依赖于图形设置) Use Graphics Settings模式仅表示相机允许HDR渲染。...(色调映射模式设置为None) 3.3 Reinhard 色调映射的目的是降低图像的亮度,以使均匀的白色区域显示多种颜色,从而揭示丢失的细节。就像当你的眼睛适应突然明亮的环境,直到你再次看到清晰。...因此,我们需要一个非线性转换,该转换不会减少很多暗值,但会减少很多高值。在极端情况下,零保持为零,而接近无穷大的值减小为1。 一个简单的函数可以实现这一点,即c/(1+ c)其中c是一个颜色通道。

    4.1K10

    10分钟辨清色彩模型|多媒体系统导论笔记

    YUV 在该模型下,颜色被分为一个亮度信号和两个色差信号进行传输,可以让一个信号同时在黑白电视机和彩色电视机实现两种显色模式。现在常用于jpeg格式的图像和pal制式的视频。...可以看出gamma矫正后压缩高光,保留了更多暗部信息 RGB是在显示器设备上显示的,以电视为例,其显像管的电压和发出的亮度并不是线性的,例如0.5的Green亮度,显像管可能只需要0.2...这样的关系曲线通常是一个乘幂函数:Y=(X+e)^γ,即Gamma校正。通常电视系统的Gamma值为2.2。RGB与XYZ转换时,该值也是一个必须的参数。...RGB为加法模型,两两叠加能得到对应的Cyan青,Magenta品红和Yellow绿,三色叠加为白,如光的叠加。而CMY为减法模型,三色叠加为黑,如颜料或墨水的叠加。...色调曲线横纵坐标为输入亮度和输出亮度,通过拖动点改变色调曲线在相应位置的斜率,用输入-输出函数的改变实现对比度的改变。请注意色调曲线的形状和位置。

    1.6K30

    基础渲染系列(七)——阴影

    中间的行漂浮着球体,而外部的行通过圆柱体连接到它们下面的立方体。 这些对象具有Unity的默认白色材质。场景有两个方向光,即默认的方向光和稍弱的黄色光。这些光与以前的教程中使用的光相同。...(两个方向光,没有阴影,没有环境光) 阴影是项目设置中质量设置的一部分,可通过“Edit/ Project Settings / Quality”找到。我们将使它们处于高质量水平。...这意味着要使用高分辨率,稳定的投影效果,150的距离和四个级联来同时支持硬阴影和软阴影。 ? (阴影质量设置) 确保两个光都设置为投射柔和的阴影。它们的分辨率应取决于质量设置。 ?...当然,这些数据存储在不同的剪辑空间中,但是我们知道这些空间的相对位置和方向。这样我们就可以从一个空间转换为另一个空间。这使我们可以从两个角度比较深度测量值。从概念上讲,我们有两个向量在同一点结束。...当靠近较暗表面的较亮表面被阴影覆盖时,这变得非常明显。亮和暗几何之间的边缘被消除锯齿,而阴影边缘则没有。 ? ? ?

    4.2K30

    UGL之颜色处理

    计算机里通常使用RGB色彩模式,例如RGB565,就是用两个字节表示一个像素的颜色,其中红绿蓝分别用5、6、5个bit。还有一些RGB555、RGB666、ARGB4444之类的。...语句把光的三原色、颜色的三原色,以及黑白色都画出来,效果如下 再多画几个 RGB888一共可以表示256*256*256=16777216种颜色,这基本得用两个4K的屏才能显示完整,而且也超过了人眼能区分的颜色数量...不过,只把RGB两两混合的画出来,还是比较容易的 而Windows的"画图"中,除了RGB,还有一种ESL模式 这个ESL与HSL/HSB含义差不多,而与RGB之间也仅是一个简单的转换关系。...Lightness 目标与周边物体的明亮对比,即主观上明度的强弱 Luminance 客观测量发光体的亮度 既然有了RGB到ESL的转换,那很容易就可以实现调整饱和度和亮度的函数了...基本规则是: 提高对比度,就是让亮的更亮,暗的更暗 降低对比度,就是所有颜色的RGB值向中间靠拢 有点意思 我是泰山,专注VX 17年! 一起学习,共同进步!

    1K30
    领券