# 使用JavaScript实现数字存储与检索网页应用

背景介绍

在现代网页应用中，用户需要高效地存储和访问数据。本项目采用JavaScript实现，通过localStorage实现本地存储，简化了前端交互，同时支持简洁易用的用户输入与数据处理流程。

思路分析

本项目的核心逻辑如下：
1. 数据存储：使用localStorage存储用户输入的三个数字。
2. 数据处理：通过JSON.parse()读取存储的数据，提取原始输入值。
3. 用户交互：输入框保存数据，点击“保存”后显示原始数字。
4. 数据验证：通过JSON.parse()确保输入的是数字数组，避免错误。

代码实现

// 存储数字到localStorage
function saveData(numbers) {
  const json = JSON.stringify(numbers);
  localStorage.setItem('user_numbers', json);
}

// 获取存储的数据并显示原始数字
function retrieveData() {
  const storedNumbers = JSON.parse(localStorage.getItem('user_numbers'));
  if (storedNumbers) {
    document.getElementById('output').textContent = `已保存到本地存储中，显示原始数字（${storedNumbers.join(', ')})`;
  }
}

// 用户输入并保存
function saveInput(input) {
  const numbers = input.split(', ').map(Number);
  saveData(numbers);
  const inputElement = document.getElementById('input');
  inputElement.value = '';
  inputElement.focus();
}

// 示例使用
document.getElementById('input').addEventListener('input', saveInput);

总结

本项目通过localStorage实现本地存储与数据检索，确保了数据的持久性和易用性。核心实现包括：
1. 数据读取：通过JSON对象解析存储的数据。
2. 用户交互：输入框保存数据，点击“保存”后显示原始输入。
3. 简洁性：采用简洁的代码结构，保持前端与后端的高效交互。