localStorage存储显示[object Object]及JSON.parse报错问题求助

现存问题 #

• 控制台抛出JSON解析错误：VM6858:1 Uncaught SyntaxError: Unexpected token o in JSON at position 1 at JSON.parse (<anonymous>)
• 点击注册按钮后localStorage存储内容异常，显示为[object Object]，无法查看存入的具体注册数据

实现说明：本次仅为练习localStorage前端浏览器端存储能力，注册数据仅存在本地供后续登录校验逻辑调用，不做服务端存储实现，不面向真实用户提供注册服务。

原始问题代码 #

HTML代码 #

<main>
  <div class="heading">
         <h1>User Registration</h1>
    </div>

    <form class="form-container">
      <ul>
      <li><label for="name">Name</label>
        <input class="name" type="text" name="name" required />
      </li>

      <li><label for="surname">Surname</label>
        <input class="surname" type="text" name="surname" required />
      </li>

      <li><label for="phone">Phone</label>
    <input class="phone" type="text" name="phone" />
      </li>

      <li><label for="email">Email</label>
      <input class="email" type="text" name="email" required /></li>
      

      <li><label for="password">Password</label>
      <input class="password" type="text" name="password" required /></li>
     
</ul>
      <button class="reg" onclick="validate()">Register</button>
    </form>
</main>

JS代码 #

//storage key
let STORAGE_KEY ="store-user-reg"


//generate ID
const createId = () =>
  `${Math.floor(Math.random() * 10000)}${new Date().getTime()}`;

//get html elements

  const formEl = {
    id:createId(),
    name: document.querySelector(".name"),
    surname: document.querySelector(".surname").value,
    phone: document.querySelector(".phone").value,
    email: document.querySelector(".email").value,
    password: document.querySelector(".password").value,
  };


//Array for stored registered users
usersArray = JSON.parse(localStorage.getItem(STORAGE_KEY)) ?? [];

//function to set local storage
function store(){
  window.localStorage.setItem(STORAGE_KEY, JSON.stringify(usersArray));
}

//register button clicked
function validate() {

let name = formEl.name.value;
let surname = formEl.name.value;
let email = formEl.name.value;
let password = formEl.name.value;


  if (!name) {
    alert("Please fill in name");
  }

  if (!surname) {
    alert("Please fill in Surname");
  }

  if (!email) {
    alert("Please fill in email");
  }

  if (!password) {
    alert("Please create a password");
  }

  usersArray.push(formEl);
  store();
  
}

错误原因 #

1. JSON.parse报错：之前调试时直接向localStorage存入了未序列化的对象，localStorage自动将对象转为[object Object]字符串存储，后续调用JSON.parse解析该非标准JSON字符串时直接抛出语法错误。
2. 存储显示[object Object]：localStorage仅支持存储字符串类型数据，直接存入JS对象时，会自动调用对象的toString()方法转为[object Object]字符串，无法保留对象的具体属性内容。
3. 代码逻辑问题：
   • 输入框取值时机错误：页面加载初始化时就获取了输入框的value，此时用户还未输入，拿到的都是空值，后续用户输入的内容不会被更新到formEl中。
   • 字段取值映射错误：validate函数中surname、email、password字段全部错误读取了name输入框的value，没有取对应输入框的内容。
   • 存储内容混入DOM对象：formEl的name属性直接存储了整个DOM元素，不是用户输入的字符串，序列化时会出现异常。
   • 表单默认提交行为未阻止：form内的button默认是submit类型，点击会触发表单提交刷新页面，打断存储逻辑。

修复后代码 #

HTML修改点 #

给注册按钮添加type="button"属性，阻止默认的表单提交刷新行为：

<button class="reg" type="button" onclick="validate()">Register</button>

JS完整修复代码 #

// 存储key
const STORAGE_KEY = "store-user-reg";

// 生成用户唯一ID
const createId = () => `${Math.floor(Math.random() * 10000)}${new Date().getTime()}`;

// 读取本地已存储的用户列表，加异常捕获兼容之前存的非法数据
let usersArray = [];
try {
  const storageData = localStorage.getItem(STORAGE_KEY);
  usersArray = storageData ? JSON.parse(storageData) : [];
} catch (e) {
  // 解析失败时清空异常存储内容，重置为空数组
  usersArray = [];
  localStorage.removeItem(STORAGE_KEY);
}

// 存储用户列表到本地
function store() {
  localStorage.setItem(STORAGE_KEY, JSON.stringify(usersArray));
}

// 注册校验逻辑
function validate() {
  // 点击时再获取输入框最新值，避免初始化时取空值
  const name = document.querySelector(".name").value.trim();
  const surname = document.querySelector(".surname").value.trim();
  const phone = document.querySelector(".phone").value.trim();
  const email = document.querySelector(".email").value.trim();
  const password = document.querySelector(".password").value.trim();

  // 校验不通过直接返回，不执行后续存储
  if (!name) return alert("Please fill in name");
  if (!surname) return alert("Please fill in Surname");
  if (!email) return alert("Please fill in email");
  if (!password) return alert("Please create a password");

  // 构造纯数据的用户对象，不混入DOM元素
  const formEl = {
    id: createId(),
    name,
    surname,
    phone,
    email,
    password
  };

  // 存入数组并持久化到本地
  usersArray.push(formEl);
  store();
  alert("Register success!");
  // 可选：注册成功后清空输入框
  document.querySelector(".form-container").reset();
}

验证方法 #

修复后先清空浏览器localStorage中对应key的旧异常数据，再填写表单点击注册，即可在Application面板的localStorage中看到序列化后的标准JSON用户数据，控制台也不会再抛出解析错误。

内容的提问来源于stack exchange，提问作者Sheldon