localStorage和sessionStorage

在HTML5中,本地存储是一个window的属性,包括localStoragesessionStorage,前者是一直存在本地的,后者是伴随着session存在

window.localStorage

localStorage特性,这个特性主要是用来作为本地存储来使用的,解决了cookie存储空间不足的问题。
localStorage 用于长久保存整个网站的数据,保存的数据没有过期时间,直到手动去删除。

  • 实例
    使用 localStorage 创建一个本地存储的 name/value 对,name=“lastname” value=“Smith”, 然后检索 “lastname” 的值,并插入到 id=“result” 的元素上:
// 存储
localStorage.setItem("lastname", "Smith");
// 检索
document.getElementById("result").innerHTML = localStorage.getItem("lastname");

window.sessionStorage

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

session参考博客

  • session概述
    Session是由服务器端创建的,用于记录用户的状态。是指一段时间内,单个客户端与Web服务器的一连串相关的交互过程。
  • session原理
    • 首次使用到Session时,服务器会自动创建Session,并创建Cookie存储SessionId发送回客户端
    • Session会为每一次会话分配一个Session对象
    • 同一个浏览器发起的多次请求,同属于一次会话(Session)
  • session作用域
    Session作用域:拥有存储数据的空间,作用范围是一次会话有效
    • 一次会话是使用同一浏览器发送的多次请求。一旦浏览器关闭,则结束会话
    • 可以将数据存入Session中,在一次会话的任意位置进行获取
    • 可传递任何数据(基本数据类型、对象、集合、数组)

json.parse与json.stringify

使用 JSON.parse() 方法将数据转换为 JavaScript 对象
使用 JSON.stringify() 方法将 JavaScript 对象转换为字符串

  • 实例
 title: state => {let title = state.title;// 如果title为空,就获取到浏览器中存储的title值?if(title !== undefined){// JSON.parse(JSON.stringify(...))使用深拷贝 -->  不止是复制了内容,同时将指针指向也复制
// window.localStorage.setItem("title",JSON.stringify(state.title));// JSON.parse() 是将字符串中的对象解析出来// window.sessionStorage 可以将一些数据暂时存储在浏览器中,其中也有多种方法//sessionStroage.getitem(key)获取数据
//title = JSON.parse(window.sessionStorage.getItem('title'));//这里,先将数据转换为js对象,再将js对象转为字符串就可以了let titleJson =  JSON.stringify(window.sessionStorage.getItem('title'));title = JSON.parse(titleJson);}return title;}

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

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

相关文章

前端开发学习笔记 3 (Chrome浏览器调试工具、Emmet语法、CSS复合选择器、CSS元素选择模式、CSS背景)

文章目录 Chrome浏览器调试工具Emmet语法CSS复合选择器后代选择器子选择器并集选择器伪类选择器 CSS元素选择模式元素选择模式概述CSS块标签CSS行内标签CSS行内块标签CSS元素显示模式转换 CSS背景CSS背景颜色CSS背景图片CSS背景图片平铺CSS背景图片位置CSS背景图片固定CSS背景复…

口语 4.7

PG section:少儿不宜 enhance our lives:提升了我们的生活质量 modify the pictures:修图 theyre way happier seeming 看起来更开心 rebaseline our expectations:重新设定我们的预期值 a famous quote:sb说过的…

HEVC预测编码

目录 帧内预测 亮度帧内预测模式 亮度帧内模式的编码 色度帧内预测模式编码 帧内预测过程 相邻参考像素的获取 参考像素的滤波 预测像素的计算 帧间预测 MV

解锁网络安全新境界:雷池WAF社区版让网站防护变得轻而易举!

网站运营者的救星:雷池WAF社区版 ️ 嘿朋友们!今天我超级激动要跟你们分享一个神器——雷池WAF社区版。这个宝贝对我们这帮网站运营者来说,简直就是保护伞! 智能语义分析技术:超级侦探上线 先说说为啥我这么稀饭它。雷…

【题解 | 分组背包】掷骰子等于目标和的方法数

掷骰子等于目标和的方法数 力扣:1155. 掷骰子等于目标和的方法数 这里有 n 个一样的骰子,每个骰子上都有 k 个面,分别标号为 1 到 k 。 给定三个整数 n、k 和 target,请返回投掷骰子的所有可能得到的结果(共有 kn 种方…

10倍提效!用ChatGPT编写系统功能文档。。。

系统功能文档是一种描述软件系统功能和操作方式的文档。它让开发团队、测试人员、项目管理者、客户和最终用户对系统行为有清晰、全面的了解。 通过ChatGPT,我们能让编写系统功能文档的效率提升10倍以上。 ​《Leetcode算法刷题宝典》一位阿里P8大佬总结的刷题笔记…

纳米体育数据足球数据接口:高阶数据包接口文档API示例②

纳米体育数据的数据接口通过JSON拉流方式获取200多个国家的体育赛事实时数据或历史数据的编程接口,无请求次数限制,可按需购买,接口稳定高效;覆盖项目包括足球、篮球、网球、电子竞技、奥运等专题、数据内容。 纳米数据API2.0版本…

TCP挥手中TIME_WAIT存在的原因

四次挥手的一般过程如图所示: 在客户端收到FIN结束报文的时候不是立刻进入CLOSED状态,而是进入TIME_WAIT状态,一般等2MLS后进入关闭状态。 原因: 1.可靠地终止 TCP 连接。 2.保证让迟来的 TCP报文段有足够的时间被识别并丢弃。 …

长文本大模型火爆国内AI市场,算力需求激增引领行业变革

近期,一款名为Kimi的大模型火爆国内AI市场,以其出色的长文本处理能力和广泛的应用前景吸引了众多关注。随着Kimi等长文本大模型的流行,算力需求持续增长,为AI行业带来了新的变革和机遇。 Kimi突破长文本处理极限,为复杂…

Leetcode-Hot 100题目分类

哈希 &#xff08;以空间换时间&#xff09; 1 两数之和 原始的暴力破解的方法&#xff1a; class Solution {public int[] twoSum(int[] nums, int target) {/** 暴力破解的方法 */int[] result new int[2];int length nums.length;for(int i 0;i<length;i){for(int j…

win10鼠标无限转圈圈是什么原因,win10系统鼠标无限转圈圈

win10鼠标无限转圈圈是什么原因?一般后台有程序在运行,鼠标出现圆圈转动则代表正在加载中,等待一会就好了。若如果转了好久的圈圈,程序没有响应,点击桌面也没有反应,则尝试打开任务管理器,将未响应或异常的程序强制结束掉。其实,出现这种情况,有可能是win10系统中的一…

【氮化镓】GaN SP-HEMT的栅极可靠性

概括总结&#xff1a; 本文研究了氮化镓&#xff08;GaN&#xff09;肖特基型p-栅高电子迁移率晶体管&#xff08;GaN SP-HEMT&#xff09;的栅极鲁棒性和可靠性&#xff0c;通过一种新的电路方法评估了在实际转换器中栅极电压&#xff08;VGS&#xff09;过冲波形的栅极电压应…

第四百四十二回 再谈flutter_launcher_icons包

文章目录 1. 概念介绍2. 使用方法3. 示例代码4. 经验与总结4.1 经验分享4.2 内容总结 我们在上一章回中介绍了"overlay_tooltip简介"相关的内容&#xff0c;本章回中将 再谈flutter_launcher_icons包.闲话休提&#xff0c;让我们一起Talk Flutter吧。 1. 概念介绍 …

dockerhub右键快速搜索脚本

Chrome 浏览器扩展的后台脚本&#xff0c;用于创建右键菜单项&#xff0c;并根据用户的操作在新的标签页中打开 Docker Hub 网站或者进行搜索。 // 创建右键菜单项&#xff0c;用于打开 Docker Hub 网站 chrome.contextMenus.create({id: search-home, // 菜单项的唯一标识符t…

吴恩达2022机器学习专项课程(一) 4.6 运行梯度下降第一周课程实验:线性回归的梯度下降算法

问题预览/关键词 更新梯度下降对模型拟合&#xff0c;等高线图&#xff0c;3d空间图的变化。什么是批量梯度下降。实验目标计算梯度运行梯度下降梯度下降迭代次数和成本函数的关系可视化模型预测在等高线图上的梯度下降学习率过大报错问题 笔记 1.模型拟合&#xff0c;等高线…

刷题之Leetcode283题(超级详细)

283.移动零 283. 移动零https://leetcode.cn/problems/move-zeroes/ 给定一个数组 nums&#xff0c;编写一个函数将所有 0 移动到数组的末尾&#xff0c;同时保持非零元素的相对顺序。 请注意 &#xff0c;必须在不复制数组的情况下原地对数组进行操作。 示例 1: 输入: nu…

C语言拾遗

1、 char *itoa(int value, char *string, int radix) 整形转换成字符串&#xff0c;但该函数实际上不属于c标准库&#xff0c;只是windows和gcc中提供了该接口。 如果无法使用该接口&#xff0c;一般可以使用sprintf进行替代。在leecode中&#xff0c;就不会提供itoa接口。 at…

Qt环形颜色选择控件, 圆环颜色选择器

参考文章Qt编写自定义控件&#xff1a;环形颜色选择控件_qconicalgradient圆环渐变-CSDN博客 感谢作责提供的方法&#xff0c;下面程序的基础思路同参考文章。 为了更方便使用&#xff0c;这个选择器是基于64色表的&#xff0c;会显示选中的索引和色值。颜色选择时计算方式也…

腾讯云优惠券介绍、领券入口及使用教程分享

腾讯云作为国内领先的云服务提供商&#xff0c;为广大用户提供了稳定、高效、安全的云计算服务。为了吸引用户上云&#xff0c;腾讯云推出了优惠券活动。本文将对腾讯云优惠券进行详细介绍&#xff0c;包括优惠券的种类、领券入口以及使用教程&#xff0c;助力大家轻松上云&…

Web APIs简介 Dom

JS的组成 API API 是一些预先定义的函数&#xff0c;目的是提供应用程序与开发人员基于软件或硬件得以访问一组例程的能力&#xff0c;而又无需访问源码&#xff0c;或理解内部工作机制的细节 简单理解&#xff1a;API是给程序员提供的一种工具&#xff0c;以便能更轻松的实现…