浏览器的本地存储---localstorage

web存储对象

Web 存储对象 localStorage  sessionStorage 允许我们在浏览器上保存键/值对。

        这两个对象保存再本地(客户端),允许保存至少 5MB 的数据(或更多),这些数据不会因为页面刷新而销毁,这表示我们可以保持对页面的访问记录的情况下刷新页面,

localStorage  sessionStorage 也有一定的区别,在实际应用中localStorage的应用范围更广

localStoragesessionStorage
在同源的所有标签页和窗口之间共享数据在当前浏览器标签页中可见,包括同源的 iframe
浏览器重启后数据仍然保留页面刷新后数据仍然保留(但标签页关闭后数据则不再保留)

两个存储对象都提供相同的方法和属性:

  • setItem(key, value) —— 存储键/值对。
  • getItem(key) —— 按照键获取值。
  • removeItem(key) —— 删除键及其对应的值。
  • clear() —— 删除所有数据。
  • key(index) —— 获取该索引下的键名。
  • length —— 存储的内容的长度。

保存数据的格式 类似"字典"(键值对),要注意键和值的数据类型应为字符进行存储,否则会被进行格式的强制转换,

基本用法

存储键/值对。

let key = "user";
let value = "password";
localStorage.setItem(key,value);let obj = {name : "tom",age : 18
}
localStorage.setItem('obj',JSON.stringify(obj));// json化对象保存为字符串形式
console.log(localStorage);

这里保存了一个键值对,打印localstorage对象可以查看到访问的数据,([object Object]的键值是应为直接存储对象被强制转换了)

这里可以看到user像对象属性一样保存在对象中,因此我们可以像访问对象属性一样去那值

console.log(localStorage.user);
// password

但是并不建议这样访问数据,因为如果数据的键值由用户生成,可能会和对象的原型继承的属性名冲突(如:length 或 toString这样的属性),所以我们采用下面的方法进行数据访问

按照键获取值。

我们可以像数组一样去循环拿到localstorage的数据

// 类数组遍历
for(let i = 0; i < localStorage.length; i++) {let key = localStorage.key(i);console.log(`${key}: ${localStorage.getItem(key)}`);
}
// for in遍历
for(let key in localStorage) {// hasOwnProperty 返回一个布尔值,若给定的属性是'非继承的'属性则返回true,继承的属性则返回falseif (!localStorage.hasOwnProperty(key)) {continue; // 跳过像 "setItem","getItem" 等这样的键}console.log(`${key}: ${localStorage.getItem(key)}`);
}
// for of遍历因为 Object.keys 只返回属于对象的键,会忽略原型上的键值。
let keys = Object.keys(localStorage);
for(let key of keys) {console.log(`${key}: ${localStorage.getItem(key)}`);
}

这里列举了三种循环遍历方法,

实例用法:输入文本自动保存

html:<textarea name="text" id="text" cols="30" rows="10" style="font-size: 3em;"></textarea>
js:
// example 输入文本自动保存
let text = document.getElementById("text");
text.oninput = ()=>{// console.log("输入事件:"+text.value);localStorage.setItem("text",text.value);console.log(localStorage.getItem("text"));
}
window.onload = ()=>{text.innerText = localStorage.getItem("text");
}

在文本域中输入内容将自动进行保存,刷新页面或关闭页面再打开任然可以在文本域中看到这段话

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

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

相关文章

高扬程水泵的性能与应用领域 /恒峰智慧科技

在现代社会中&#xff0c;科技的发展为我们的生活带来了无数便利和可能性。其中&#xff0c;高扬程水泵作为一种高效能的水泵&#xff0c;其独特的设计使其在各个领域都有着广泛的应用&#xff0c;尤其是在森林消防中。 一、高扬程水泵的性能 1. 高扬程&#xff1a;高扬程水泵…

前端深度的技术有哪些?

前端技术的深度涵盖了一系列专业知识、技术栈和实践方法&#xff0c;这些内容可以帮助开发者构建高性能、可维护、用户体验优秀的Web应用程序。以下是前端深度技术的一些关键领域&#xff1a; 1. 现代Web框架与库 React、Vue.js、Angular等主流框架的深入理解和实战经验&#…

TinyML之Hello world----基于Arduino Nano 33 BLE Sense Rev2的呼吸灯

早期版本的Hello World 这应该是一个逼格比较高的呼吸灯了&#xff0c;用ML来实现呼吸灯功能&#xff0c;之前已经有大佬发过类似的文章&#xff1a;https://blog.csdn.net/weixin_45116099/article/details/126310816 当前版本的Hello World 这是一个ML的入门例程&#xff…

C#身份查验接口、身份证文字识别接口、金融身份验证

针对金融领域远程自主开户的实名认证&#xff0c;翔云人工智能开放平台提出了有针对性的解决方案。翔云实名认证API其中包含了身份证实名认证、人脸识别、人证合一和银行卡实名认证&#xff0c;可快速识别提取用户身份信息&#xff0c;实时联网权威数据源进行用户身份的验证&am…

常见面试题总结

1. 苍穹外卖的模块 苍穹外卖大方向上主要分为管理端和用户端 管理端使用vue开发&#xff0c;主要是商家来使用&#xff0c;提供餐品的管理功能&#xff0c;主要有下面几个模块&#xff1a; 员工模块&#xff0c;提供员工账号的登录功能和管理功能 分类、菜品、套餐模块&…

车载域控制器介绍

车载域控制器主要是指用于车辆控制的专用控制器&#xff0c;域代表不同的区域用同一个控制器&#xff0c;包括车身域底盘域&#xff0c;主机等。常用的域控制器主要有基于英伟达orin xavier平台的&#xff0c;基于ti tda4平台的&#xff0c;tc297/397平台的。 域控制器常用的配…

promise笔记

1.介绍 之前的异步编程都是回调函数&#xff08;数据库操作、ajax、定时器、fs读取文件 &#xff09; promise是es6异步编程新的解决方案&#xff0c;是一个构造函数 优点&#xff1a;支持链式调用&#xff0c;可以解决回调地狱&#xff0c;可以指定回调函数 2.使用 functio…

conda环境查看当前可下载的Django版本

要使用conda查看可用的Django版本&#xff0c;你需要使用conda search命令。以下是如何进行操作的步骤&#xff1a; 打开你的终端。输入以下命令&#xff1a; conda search django运行这个命令后&#xff0c;你将看到一个列表&#xff0c;其中包含了在当前配置的conda源中可用…

Seatunnel-2.3.3 自打包 docker部署(含web)

前言 此篇重点是&#xff0c;自己将源码编译后&#xff0c;将打包文件部署在docker里&#xff08;也可以直接用官网的&#xff09; 如果也有人是希望&#xff0c;将自己打包的源码部署了&#xff0c;可以参考可乐的这篇文章&#xff0c;这篇文章详细介绍了2.3.3的serve和web的…

定时任务管理系统详细设计说明书

目录 定时任务管理系统详细设计说明书 1. 概述 2. 系统架构 2.1 技术选型 2.2 系统组件 2.3 安全设计 3. 功能模块设计 3.1 任务查询 3.2 任务创建和修改 3.3 任务暂停和启动 3.4 任务报表导出 4. 数据库设计 4.1 任务表 (tasks) 4.2 任务执行记录表…

SpringCloud之负载均衡Ribbon

Ribbon 是一个客户端负载均衡工具&#xff0c;主要功能是将面向服务的Rest模板&#xff08;RestTemplate&#xff09;请求转换成客户端负载均衡的服务调用。通过Ribbon&#xff0c;开发人员可以在客户端实现请求的负载均衡&#xff0c;而无需单独部署负载均衡器。Ribbon支持多…

在config.json文件中配置出来new mars3d.graphic.PolylineCombine({大量线合并渲染类型的geojson图层

在config.json文件中配置出来new mars3d.graphic.PolylineCombine({大量线合并渲染类型的geojson图层 问题场景&#xff1a; 1.浏览官网示例的时候图层看到大量线数据合并渲染的示例 2.矢量数据较大量级的时候&#xff0c;这种时候怎么在config.json文件中尝试配置呢&#x…

积分管理系统论文

摘  要 随着计算机和网络的不断革新&#xff0c;世界已经进入了前所未有的电子时代。作为实用性强、应用范围广泛的会员管理系统也正在被越来越多的各类企业用于消费管理领域。然而&#xff0c;那些针对性强、企业理念清晰的大型超市也正发展迅速&#xff0c;这些大型超市应该…

软件更新 | TSMaster 2024.04 最新版已上线,来看看新增了哪些实用功能

TSMaster是集汽车总线嵌入式代码生成、监控、仿真、开发、UDS诊断、CCP/XCP标定、ECU刷写、I/O控制、测试测量等功能于一体的国产软件工具。在最新更新的软件版本里&#xff0c;增加了很多新功能&#xff0c;其中期待已久的DoIP诊断功能终于在最新升级版本里可以实现&#xff0…

Redis__数据类型

文章目录 &#x1f60a; 作者&#xff1a;Lion J &#x1f496; 主页&#xff1a; https://blog.csdn.net/weixin_69252724 &#x1f389; 主题&#xff1a;Redis__数据类型 ⏱️ 创作时间&#xff1a;2024年04月28日 ———————————————— 这里写目录标题 文…

理清STM32的内存(ram)与flash(rom)空间

keil工程变异代码的时候&#xff0c;会有如下输出信息 code:代码机器编译后生成的一系列指令&#xff0c;永远只放在flsah&#xff0c;内存ram不会存在&#xff1b; RO-data:只读常量&#xff0c;永远只放在flash内&#xff0c;存ram不会存在&#xff1b;&#xff1b; RW-dat…

SCP收容物001

注 &#xff1a;本文是特别版&#xff0c;本文只供开玩笑 ,与steve_gqq_MC合作。 --------------------------------------------------------------------------------------------------------------------------------- 前言&#xff1a;我的第一篇文章说过&#xff0c;SC…

【树莓派】yolov5 Lite,目标检测,行人检测入侵报警,摄像头绑定

延续之前的程序&#xff1a; https://qq742971636.blog.csdn.net/article/details/138172400 文章目录 播放声音pygame不出声音怎么办&#xff08;调节音量&#xff09;树莓派上的音乐播放器&#xff08;可选&#xff09;命令行直接放歌&#xff08;尝试放mp3歌曲&#xff09; …

word添加行号

打开页面设置&#xff0c;找到行号