使用JavaScript操作本地存储

2025-01-08 15:50
文章标签 java script 存储 本地 操作 使用

本文主要是介绍使用JavaScript操作本地存储，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

《使用JavaScript操作本地存储》这篇文章主要为大家详细介绍了JavaScript中操作本地存储的相关知识,文中的示例代码讲解详细,具有一定的借鉴价值,有需要的小伙伴可以参考一下...

本地存储：localStorage 和 sessionSt编程orage

在 JavaScript 中，lpythonocalStorage 和 sessionStorage 都是 Web Storage API 的一部分，用于在浏览器中存储数据。它们之间的主要区别是：

  • localStorage：数据持久存储，即使浏览器关闭，数据依然存在。
  • sessionStorage：数据仅在当前会话中存在，当浏览器窗口或标签页关闭时，数据会被清除。

这两者都可以存储字符串类型的数据，但可以通过 jsON 序列化（JSON.stringify）和反序列化（JSON.parse）存储和读取对象、数组等复杂数据结构。

基本使用方法

1. localStorage 示例

设置数据：

localStorage.setItem('username', 'JohnDoe');
localStorage.setItem('age', '30');

获取数据：

const username = localStorage.getItem('username'); // 'JohnDoe'
const age = localStorage.getItem('age'); // '30'

删除数据：

localStorage.removeItem('username');

清空所有数据：

localStorage.clear();

数据持久性：

当你关闭浏览器并重新打开它时，localStorage 中的数据依然存在。你可以在后续的页面访问中读取这些数据。

2. sessionStorage 示例

设置数据：

sessionStorage.setItem('username', 'JaneDoe');
sessionStorage.setItem('age', '25');

获取数据：

const username = sessionStorage.getItem('username'); // 'JaneDoe'
const age = sessionStorage.getItem('age'); // '25'

删除数据：

sessionStorage.removeItem('username');

清空所有数据：

sessionStorage.clear();

数据生命周期：

sessionStorage 中的数据仅在当前会话期间有效。关闭浏览器标签页或窗口时，数据会被清除。

实际项目中的应用

我们可以将本地存储用于各种应用场景，例如用户身份验证、用户设置或购物车状态存储等。

示例 1：用户登录状态管理

假设你正在开发一个简单javascript的登录页面，当用户成功登录时，将用户名和身份标识存储在 localStorage 中，后续页面可以读取这些数据来判断用户是否已经登录。

html（登录页面）：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Login</title>
China编程</head>
<body>
  <h1>Login</h1>
  <form id="loginForm">
    <input type="text" id="username" placeholder="Username" required>
    <input type="password" id="password" placeholder="Password" required>
    <button type="submit">Login</button>
  </form>
  
  <script src="login.js"></script>
</body>
</html>

javascript（login.js）：

document.getElementById('loginForm').addEventListener('submit', function(event) {
  event.preventDefault();
  
  const username = document.getElementById('username').value;
  const password = document.getElementById('password').value;

  // 假设进行简单的用户名和密码验证
  if (username === 'admin' && password === '1234') {
    // 登录成功，存储登录信息到 localStorage
    localStorage.setItem('username', username);
    localStorage.setItem('isLoggedIn', 'true');
    alert('Login successful!');
    
    // 跳转到欢迎页面
    window.location.href = 'welcome.html';
  } else {
    alert('Invalid credentials');
  }
});

欢迎页面（welcome.html）：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Welcome</title>
</head>
<body>
  <h1>Welcome</h1>
  <p id="welcomeMessage"></p>
  
  <script src="welcome.js"></script>
</body>
</html>

JavaScript（welcome.js）：

// 在欢迎页面加载时，检查用户是否已登录
window.onload = function() {
  const isLoggedIn = localStorage.getItem('isLoggedIn');
  const username = localStorage.getItem('username');
  
  if (isLoggedIn === 'true' && username) {
    document.getElementById('welcomeMessage').textContent = `Welcome, ${username}!`;
  } else {
    alert('You are not logged in');
    window.location.href = 'login.html';
  }
};

解释：

登录页面：用户输入用户名和密码进行登录，如果验证成功，将用户名和登录状态存储到 localStorage 中。

欢迎页面：当用户访问欢迎页面时，首先检查 localStorage 中是否存储了登录信息，如果有，则显示欢迎信息；否则，跳转到登录页面。

示例 2：实现一个简单的购物车功能

在电商网站中，可以使用 localStorage 来存储用户的购物车内容，确保在用户关闭浏览器后仍能保存购物车的状态。

HTML（购物车页面）：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Shopping Cart</title>
</head>
<body>
  <h1>Your Shopping Cart</h1>
  <div id="cartItems"></div>
  <button id="clearCart">Clear Cart</button>
  
  <script src="cart.js"></script>
</body>
</html>

JavaScript（cart.js）：

// 添加商品到购物车
function addToCart(product) {
  let cart = JSON.parse(localStorage.getItem('cart')) || [];
  cart.push(product);
  localStorage.setItem('cart', JSON.stringify(cart));
}

// 渲染购物车内容
function renderCart() {
  const cart = JSON.parse(localStorage.getItem('cart')) || [];
  const cartItemsContainer = document.getElementById('cartItems');
  
  if (cart.length === 0) {
    cartItemsContainer.innerHTML = 'Your cart is empty.';
  } else {
    cartItemsContainer.innerHTML = cart.map(item => `<p>${item.name} - $${item.price}</p>`).join('');
  }
}

// 清空购物车
document.getElemehttp://www.chinasem.cnntById('clearCart').addEventListener('click', function() {
  localStorage.removeItem('cart');
  renderCart();
});

// 页面加载时渲染购物车
window.onload = renderCart;

// 示例：添加一些商品到购物车
addToCart({ name: 'Laptop', price: 999 });
addToCart({ name: 'Headphones', price: 199 });

解释：

购物车功能：通过 localStorage 存储购物车中的商品列表（使用 JSON.stringify 存储数组，使用 JSON.parse 读取）。

页面加载时：当页面加载时，检查 localStorage 中是否有购物车数据，并渲染到页面上。

清空购物车：点击“清空购物车”按钮时，删除 localStorage 中的购物车数据，并刷新页面。

总结

localStorage 和 sessionStorage 是用于在客户端存储数据的 Web API，可以存储字符串、对象等数据。

localStorage 用于持久存储数据，页面关闭后数据仍然存在；sessionStorage 用于会话存储，浏览器关闭或标签页关闭时数据消失。

在实际项目中，常见的应用包括用户认证、购物车状态、用户设置等场景。

通过实际项目中的示例，您可以更清晰地理解如何使用这两个存储方法来管理浏览器中的数据。

到此这篇关于使用JavaScript操作本地存储的文章就介绍到这了,更多相关JavaScript本地存储内容请搜索编程China编程(www.chinasem.cn)以前的文章或继续浏览下面的相关文章希望大家以后多多支持China编程(www.chinasem.cn)！

这篇关于使用JavaScript操作本地存储的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/1152981。

相关文章

SpringBoot使用注解集成Redis缓存的示例代码

SpringBoot使用注解集成Redis缓存的示例代码

《SpringBoot使用注解集成Redis缓存的示例代码》：本文主要介绍在SpringBoot中使用注解集成Redis缓存的步骤,包括添加依赖、创建相关配置类、需要缓存数据的类（Tes... 目录一、创建 Caching 配置类二、创建需要缓存数据的类三、测试方法Spring Boot 熟悉后，集成一个外
阅读更多...
Redis分布式锁使用及说明

Redis分布式锁使用及说明

《Redis分布式锁使用及说明》本文总结了Redis和Zookeeper在高可用性和高一致性场景下的应用,并详细介绍了Redis的分布式锁实现方式,包括使用Lua脚本和续期机制,最后,提到了RedLo... 目录Redis分布式锁加锁方式怎么会解错锁？举个小案例吧解锁方式续期总结Redis分布式锁如果追求
阅读更多...
使用C#如何创建人名或其他物体随机分组

使用C#如何创建人名或其他物体随机分组

《使用C#如何创建人名或其他物体随机分组》文章描述了一个随机分配人员到多个团队的代码示例,包括将人员列表随机化并根据组数分配到不同组,最后按组号排序显示结果... 目录C#创建人名或其他物体随机分组此示例使用以下代码将人员分配到组代码首先将lstPeople ListBox总结C#创建人名或其他物体随机分组
阅读更多...
SpringBoot实现基于URL和IP的访问频率限制

SpringBoot实现基于URL和IP的访问频率限制

《SpringBoot实现基于URL和IP的访问频率限制》在现代Web应用中,接口被恶意刷新或暴力请求是一种常见的攻击手段,为了保护系统资源,需要对接口的访问频率进行限制,下面我们就来看看如何使用... 目录1. 引言2. 项目依赖3. 配置 Redis4. 创建拦截器5. 注册拦截器6. 创建控制器8.
阅读更多...
详解Java中的敏感信息处理

详解Java中的敏感信息处理

《详解Java中的敏感信息处理》平时开发中常常会遇到像用户的手机号、姓名、身份证等敏感信息需要处理,这篇文章主要为大家整理了一些常用的方法,希望对大家有所帮助... 目录前后端传输AES 对称加密RSA 非对称加密混合加密数据库加密MD5 + Salt/SHA + SaltAES 加密平时开发中遇到像用户的
阅读更多...
Java 枚举的常用技巧汇总

Java 枚举的常用技巧汇总

《Java枚举的常用技巧汇总》在Java中,枚举类型是一种特殊的数据类型,允许定义一组固定的常量,默认情况下,toString方法返回枚举常量的名称,本文提供了一个完整的代码示例,展示了如何在Jav... 目录一、枚举的基本概念1. 什么是枚举？2. 基本枚举示例3. 枚举的优势二、枚举的高级用法1. 枚举
阅读更多...
使用JavaScript将PDF页面中的标注扁平化的操作指南

使用JavaScript将PDF页面中的标注扁平化的操作指南

《使用JavaScript将PDF页面中的标注扁平化的操作指南》扁平化(flatten)操作可以将标注作为矢量图形包含在PDF页面的内容中,使其不可编辑,DynamsoftDocumentViewer... 目录使用Dynamsoft Document Viewer打开一个PDF文件并启用标注添加功能扁平化
阅读更多...
JavaScript DOM操作与事件处理方法

JavaScript DOM操作与事件处理方法

《JavaScriptDOM操作与事件处理方法》本文通过一系列代码片段,详细介绍了如何使用JavaScript进行DOM操作、事件处理、属性操作、内容操作、尺寸和位置获取,以及实现简单的动画效果,涵... 目录前言1. 类名操作代码片段代码解析2. 属性操作代码片段代码解析3. 内容操作代码片段代码解析4.
阅读更多...
如何在一台服务器上使用docker运行kafka集群

如何在一台服务器上使用docker运行kafka集群

《如何在一台服务器上使用docker运行kafka集群》文章详细介绍了如何在一台服务器上使用Docker运行Kafka集群,包括拉取镜像、创建网络、启动Kafka容器、检查运行状态、编写启动和关闭脚本... 目录1.拉取镜像2.创建集群之间通信的网络3.将zookeeper加入到网络中4.启动kafka集群
阅读更多...
SpringBoot集成SOL链的详细过程

SpringBoot集成SOL链的详细过程

《SpringBoot集成SOL链的详细过程》Solanaj是一个用于与Solana区块链交互的Java库,它为Java开发者提供了一套功能丰富的API,使得在Java环境中可以轻松构建与Solana... 目录一、什么是solanaj?二、Pom依赖三、主要类3.1 RpcClient3.2 Public
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2