如何使用JavaScript从LocalStorage读取数据到页面？

一、LocalStorage 核心概念 #

• 这是浏览器自带的本地持久化存储工具，数据存在用户的浏览器里，除非主动删除，就算关页面、重启浏览器，数据也不会丢
• 存储上限大概5MB，只能存字符串，要是存对象、数组这类复杂数据，得先转成JSON字符串
• 受同源规则限制：只有同一协议、域名、端口的页面，才能访问同一份LocalStorage数据

二、你的现有代码功能分析 #

你给的代码实现了LocalStorage的写入和清空功能，但只在控制台打印内容，没把数据渲染到页面上：

let p = local = () => {
  let key = prompt("Enter the Key Value")
  let value = prompt("Enter the Value")
  localStorage.setItem(key, value)
  let r = localStorage
  console.log(`The Key is ${key} And The Value is ${r.getItem(key)}`)
}
let c = clearr = () => {
  localStorage.clear()
  setTimeout(() => {
    alert("Your Localstorage Has Been Deleted")
  }, 2000);
}
add.addEventListener('click', p)
clear.addEventListener('click', c)

• localStorage.setItem(key, value)：往LocalStorage里存键值对
• localStorage.clear()：清空当前域名下所有LocalStorage数据

三、把LocalStorage数据读取到页面的具体实现 #

1. 读取单个已知键值对并展示 #

如果你知道要读的键名，直接用localStorage.getItem(key)拿值，再插到页面元素里就行：

// 假设页面有个id是"content"的div
function showSingleItem() {
  const targetKey = 'username'; // 要读取的键名
  const savedValue = localStorage.getItem(targetKey);
  const contentBox = document.getElementById('content');
  if (savedValue) {
    contentBox.innerHTML = `<p>存储的用户名：${savedValue}</p>`;
  } else {
    contentBox.innerHTML = '<p>这个键名下没有数据</p>';
  }
}
// 页面加载完就调用
window.onload = showSingleItem;

2. 读取所有存储数据并批量展示 #

要展示所有存的键值对，可以遍历LocalStorage的所有键名，逐个取值后渲染：

// 假设页面有个id是"storage-list"的ul列表
function showAllItems() {
  const listBox = document.getElementById('storage-list');
  listBox.innerHTML = ''; // 先清空旧内容
  // 遍历所有存储的键
  for (let i = 0; i < localStorage.length; i++) {
    const key = localStorage.key(i);
    const value = localStorage.getItem(key);
    const listItem = document.createElement('li');
    listItem.textContent = `键：${key} | 值：${value}`;
    listBox.appendChild(listItem);
  }
  // 没数据时提示
  if (localStorage.length === 0) {
    listBox.innerHTML = '<li>LocalStorage里啥也没有</li>';
  }
}
// 页面加载完就展示数据
window.onload = showAllItems;

// 修改你原来的按钮事件，存完或清空后自动刷新页面展示
add.addEventListener('click', () => {
  p();
  showAllItems(); // 存完数据后更新页面
});
clear.addEventListener('click', () => {
  c();
  setTimeout(() => {
    showAllItems(); // 清空提示弹完后更新页面
  }, 2000);
});

3. 处理对象、数组这类复杂数据 #

要是存的是对象或数组，得先用JSON.stringify()转成字符串再存，读取时用JSON.parse()转回来：

// 存对象示例
const userInfo = { name: '张三', age: 25 };
localStorage.setItem('user', JSON.stringify(userInfo));

// 读取并渲染示例
const savedUser = JSON.parse(localStorage.getItem('user'));
if (savedUser) {
  document.getElementById('user-info').innerHTML = `
    <p>姓名：${savedUser.name}</p>
    <p>年龄：${savedUser.age}</p>
  `;
}

四、要注意的几个点 #

• 别存敏感信息：LocalStorage是明文存储的，密码、银行卡号这类数据绝对不能放
• 跨域读不了：不同域名的页面，没法互相读取对方的LocalStorage数据
• 只认字符串：存非字符串数据必须先序列化，读的时候再反序列化

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