JS本地存储怎么用_JavaScriptlocalStorage与sessionStorage使用方法

轻明同学_3943

轻明同学_3943

2025-11-20

840人浏览

原创

localstorage用于持久存储,数据长期保存;sessionstorage仅在会话期间有效,关闭标签页后清除。两者均以字符串形式存储,支持setitem、getitem等方法操作,可通过json.stringify和json.parse处理对象。注意:不同域名隔离,存储上限5-10mb,避免存敏感信息。

js本地存储怎么用_javascriptlocalstorage与sessionstorage使用方法

JavaScript 提供了两种常用的本地存储方式:localStorage 和 sessionStorage。它们都能在浏览器中保存数据,使用简单,不需要依赖服务器。下面详细介绍它们的用法和区别。

localStorage 基本用法

localStorage 用于长期保存数据,除非用户手动清除浏览器缓存或通过代码删除,否则数据会一直存在。

常用方法:
  • 保存数据: localStorage.setItem('key', 'value');
  • 读取数据: localStorage.getItem('key');
  • 删除数据: localStorage.removeItem('key');
  • 清空所有数据: localStorage.clear();

示例:

// 保存用户名称
localStorage.setItem('username', '张三');

// 获取用户名
let name = localStorage.getItem('username');
console.log(name); // 输出:张三

// 删除用户名
localStorage.removeItem('username');

sessionStorage 基本用法

sessionStorage 保存的数据只在当前会话有效,关闭浏览器标签页后数据会被清除。适合临时保存敏感或短期信息。

Feishu calendar sync, local ics to json data for AI agent
Feishu calendar sync, local ics to json data for AI agent

将ICS日历文件转为JSON格式,用于飞书日历导入导出及数据集成。

下载
使用方法与 localStorage 相同:
  • sessionStorage.setItem('key', 'value');
  • sessionStorage.getItem('key');
  • sessionStorage.removeItem('key');
  • sessionStorage.clear();

示例:

// 保存登录状态(仅当前页面会话)
sessionStorage.setItem('isLoggedIn', 'true');

// 检查是否已登录
if (sessionStorage.getItem('isLoggedIn') === 'true') {
  console.log('用户已登录');
}

// 关闭页面后数据自动消失

注意事项和使用建议

虽然 localStorage 和 sessionStorage 使用方便,但也要注意以下几点:

  • 只能存储字符串。如果要保存对象,需用 JSON.stringify() 转换,读取时用 JSON.parse() 解析。
  • 不同域名的存储空间是隔离的,无法互相访问。
  • 存储大小有限制,通常为 5-10MB,超出会报错。
  • 不要存储敏感信息(如密码),因为数据对 JavaScript 完全可见。

对象存储示例:

// 存储对象
let user = { name: '李四', age: 25 };
localStorage.setItem('user', JSON.stringify(user));

// 读取并解析
let userData = JSON.parse(localStorage.getItem('user'));
console.log(userData.name); // 输出:李四
基本上就这些。localStorage 适合持久化数据,sessionStorage 适合临时会话数据,根据实际需求选择即可。

Java免费学习笔记:立即使用
解锁 Java 大师之旅:从入门到精通的终极指南

相关专题

更多
json数据格式
json数据格式

JSON是一种轻量级的数据交换格式。本专题为大家带来json数据格式相关文章,帮助大家解决问题。

2023.08.07

2015

5

json是什么
json是什么

JSON是一种轻量级的数据交换格式,具有简洁、易读、跨平台和语言的特点,JSON数据是通过键值对的方式进行组织,其中键是字符串,值可以是字符串、数值、布尔值、数组、对象或者null,在Web开发、数据交换和配置文件等方面得到广泛应用。本专题为大家提供json相关的文章、下载、课程内容,供大家免费下载体验。

2023.08.23

2902

1

jquery怎么操作json
jquery怎么操作json

操作的方法有:1、“$.parseJSON(jsonString)”2、“$.getJSON(url, data, success)”;3、“$.each(obj, callback)”;4、“$.ajax()”。更多jquery怎么操作json的详细内容,可以访问本专题下面的文章。

2023.10.13

996

3

go语言处理json数据方法
go语言处理json数据方法

本专题整合了go语言中处理json数据方法,阅读专题下面的文章了解更多详细内容。

2025.09.10

3279

7

js 字符串转数组
js 字符串转数组

js字符串转数组的方法:1、使用“split()”方法;2、使用“Array.from()”方法;3、使用for循环遍历;4、使用“Array.split()”方法。本专题为大家提供js字符串转数组的相关的文章、下载、课程内容,供大家免费下载体验。

2023.08.03

1618

5

js截取字符串的方法
js截取字符串的方法

js截取字符串的方法有substring()方法、substr()方法、slice()方法、split()方法和slice()方法。本专题为大家提供字符串相关的文章、下载、课程内容,供大家免费下载体验。

2023.09.04

2404

5

java基础知识汇总
java基础知识汇总

java基础知识有Java的历史和特点、Java的开发环境、Java的基本数据类型、变量和常量、运算符和表达式、控制语句、数组和字符串等等知识点。想要知道更多关于java基础知识的朋友,请阅读本专题下面的的有关文章,欢迎大家来php中文网学习。

2023.10.24

5884

49

字符串介绍
字符串介绍

字符串是一种数据类型,它可以是任何文本,包括字母、数字、符号等。字符串可以由不同的字符组成,例如空格、标点符号、数字等。在编程中,字符串通常用引号括起来,如单引号、双引号或反引号。想了解更多字符串的相关内容,可以阅读本专题下面的文章。

2023.11.24

5169

6

java读取文件转成字符串的方法
java读取文件转成字符串的方法

Java8引入了新的文件I/O API,使用java.nio.file.Files类读取文件内容更加方便。对于较旧版本的Java,可以使用java.io.FileReader和java.io.BufferedReader来读取文件。在这些方法中,你需要将文件路径替换为你的实际文件路径,并且可能需要处理可能的IOException异常。想了解更多java的相关内容,可以阅读本专题下面的文章。

2024.03.22

6894

16

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
WebStorm 官方调试文档
WebStorm 官方调试文档

共0课时 | 0人学习

React 教程
React 教程

共58课时 | 12.1万人学习

TypeScript 教程
TypeScript 教程

共19课时 | 6.6万人学习