首页 > 其他分享 >LocalStorage 的使用方法

LocalStorage 的使用方法

时间:2024-08-21 14:50:52浏览次数:10  
标签:存储 浏览器 window LocalStorage key 使用 localStorage 方法

LocalStorage 是一种 web 端的存储机制,它使得由 JavaScript 编写的网站或者应用可以无限期的在浏览器中存储并访问数据。什么是无限期呢?就是说存储在浏览器中的数据是会一直存在的,及时浏览器被关闭了也不会消失。

LocalStorage 的使用方法

要在你的 web 应用中使用 LocalStorage,只需要掌握以下的五种方法就可以了:

setItem(): "增(改)",将数据以键值对的形式存到 LocalStorage 中
getItem(): "查",从 LocalStorage 获得对应键值的数据
removeItem(): "删",删除 LocalStorage 中给定键的数据条目
clear(): 清空 LocalStorage
key(): 传递一个数字 n,获取第 n 个键的数据

setItem()

就像这个方法的名一样,它可以在 LocalStorage 中存储数据。

它会接受两个参数,一个 key 和一个 value,通过 key 可以获取到对应的 value。

window.localStorage.setItem('name', 'Cola Frontend');
在这里,name 是我们的给定的 key,而 Cola Frontend 就是与这个这个 key 相对应的 value。记住:LocalStorage 只能存储字符串。
如果你想要将一个对象或者一个数组存储在 LocalStorage 中,你需要先将它们转换成字符串的形式。如何将其转为字符串呢?这里不是简单地 toString() 方法,而是要用到 JSON.stringify() 这个方法:

const developer = {
  name: 'Cola Frontend',
  skills: ['React', 'Redux', 'RxJS', 'TypeScript'],
}

window.localStorage.setItem('developer', JSON.stringify(developer));

getItem()

使用 getItem() 方法可以访问到存在浏览器 localStorage 中的数据对象,它以 key 作为参数,并且返回与 key 相对应的 value。上面提到过,这个 value 只是字符串,并不是 JavaScript 对象或者数组。

如何拿到我们刚才存储的值呢?
window.localStorage.getItem('developer');

返回的数据是这样的:
"{"name":"Cola Frontend","skills":["React","Redux","RxJS","TypeScript"]}"
这显然不是我们想要的结果,要想正常的使用这个值,你需要先将它转换回对象类型。我们可以使用 JSON.parse() 来将一个 JSON 字符串转换成 JavaScript 对象:
JSON.parse(window.localStorage.getItem('developer'));

removeItem()

removeItem() 方法会根据传入的 key 删除 localStorage 中对应的数据。如果不存在这个 key 的话,那么它什么都不会做。
window.localStorage.removeItem('developer');

clear()

clear() 方法会删除 domain 内整个 localStorage 中的所有记录。它没有参数。
var keyName = window.localStorage.key(index);
浏览器支持情况

key()

key() 这个方法看起来没什么太大的必要,它的设计初衷是让你能很方便的通过 keys 遍历整个 localStorage,或者通过索引获取到 key 的名字。
var keyName = window.localStorage.key(index);

localStorage 作为一种 web 端的存储机制,被写入了 HTML5 的设计规范中。所有的主流浏览器对它都是支持的,包括了 IE8。为了确保浏览器支持 localStorage,你可以使用下面这段代码进行检验:

if (typeof(Storage) !== "undefined") {
    // Code for localStorage
} else {
    // No web storage Support.
}

使用限制

通过上面的介绍可以知道, localStorage 用起来是很方便的,但是这种方便带来的弊端就是很容易错误地使用它。遵循以下的几点建议,不要在这几种情况下使用 localStorage:

不要在 localStorage 中存储敏感的用户信息
它不是服务器端数据库的替代品,因为信息只保存在浏览器中
localStorage 的大小不能超过 5MB,所有浏览器都是这样
localStorage 非常没有安全性,它没有对数据的保护机制,可以被任意的 web 端代码获取
localStorage 是同步的,这意味着任何的操作都是一个接一个执行的

标签:存储,浏览器,window,LocalStorage,key,使用,localStorage,方法
From: https://www.cnblogs.com/baozhengrui/p/18371581

相关文章

  • store vue 仓库的使用方法
    1.项目介绍store.js是一个轻量级的JavaScript库,旨在封装浏览器的localStorage功能,以实现跨浏览器兼容的本地存储解决方案。它不需要依赖于Cookie或Flash,提供简单易用的API,使得开发者可以方便地进行键值对存储操作。基础使用以下是一些基础操作示例://存储数据store......
  • 两种,统计各个方法的执行时间的写法
    publicclassT1{@Testvoidtest01(){longstartTime=System.currentTimeMillis();log.info("方法1开始执行,开始时间:{}",startTime);method01();longendTime=System.currentTimeMillis();log.info("方法1执......
  • 异步编程CompletableFuture的一些使用demo
      publicstaticThreadPoolExecutorexecutor=newThreadPoolExecutor(5,5,5L,TimeUnit.SECONDS,newLinkedBlockingQueue<>(1000),newThreadPoolExecutor.CallerRunsPolicy());publicstaticvoidmain(String[]args)throwsException{Complet......
  • 微信小程序SSL证书申请重点和方法
    微信小程序运行模式主要在手机微信内,这一套程序可以解决了用户注册账户及支付相关问题,另外使用很方便,用户不用特意的去安装小程序,只要在微信里面就可以开发,只因为这样微信小程序很受欢迎。对于开发者来说,小程序在加密协议过程,SSL证书起到了关键性的作用,也是微信小程序与微信交......
  • Vue基本使用
    一、什么是Vue通过我们学习的html+css+js已经能够开发美观的页面了,但是开发的效率还有待提高,那么如何提高呢?我们先来分析下页面的组成。一个完整的html页面包括了视图和数据,数据是通过请求从后台获取的,那么意味着我们需要将后台获取到的数据呈现到页面上,很明显,这就需要我们......
  • 使用Mybatis 的PageHelper插件实现分页查询功能
    Mybatis提供了一个分页插件PageHelper,它会帮助我们自动完成分页和获取总数量的操作,可以方便实现分页查询。第一步,在pom.xml文件引入PageHelper依赖。<dependency><groupId>com.github.pagehelper</groupId><artifactId>pagehelper-spring-boot-s......
  • 在编程学习中克服挫折:心态调整、学习方法与成功经验
    引言编程学习之路,往往充满挑战与挫折。对于许多初学者来说,编程不仅是学习新知识,还涉及理解抽象的概念、解决复杂的问题、以及面对反复出现的错误。而即便是经验丰富的开发者,也会遇到新技术、新框架带来的挑战,以及在项目中遭遇的各种意外状况。无论在哪个阶段,挫折感都可能如同......
  • WiFi诊断显示问题调查路由器或访问点的问题的解决方法
    突然连接不上,显示问题调查路由器或访问点的问题解决办法:(1)先把网络禁用然后再重启,重启还是连接不上,按照后面步骤操作控制面板(小图标版)——网络和共享中心——更改适配器设置——选中wlan——右键禁用——在启动(2)右键点击win出现设备管理器,找到网络适配器(3)右键卸载其中的......
  • 函数方法_java
    1.方法概述1.1方法的概念方法(method)是程序中最小的执行单元注意:方法必须先创建才可以使用,该过程成为方法定义方法创建后并不是直接可以运行的,需要手动使用后,才执行,该过程成为方法调用2.方法的定义和调用2.1无参数方法定义和调用定义格式:publicstaticvoid方......
  • MySQL 禁止使用 HASH 索引
    在MySQL中,虽然InnoDB存储引擎默认使用的是BTREE索引,但它也支持一种特殊的自适应哈希索引(adaptivehashindex,AHI),这是InnoDB自动管理和使用的,用户无法直接控制。然而,对于内存存储引擎MEMORY(之前称为HEAP),MySQL确实允许用户显式地创建HASH索引。如果你想要在MEMORY表上使用HASH索......