前端开发必备：JavaScript本地存储终极指南

2023-11-28 12:55:20

使用JavaScript解锁本地存储的强大功能

本地存储的优势

使用本地存储可以为你的Web应用程序带来诸多好处：

数据持久化： 即使在浏览器关闭后，存储在本地存储中的数据也不会丢失，为用户提供更好的体验。
轻量级： 本地存储不会影响页面的加载速度，即使存储大量数据也不会拖慢页面响应速度。
安全性： 本地存储的数据不会被其他网站或脚本访问，确保了数据的安全性。

如何使用JavaScript实现本地存储操作？

function register() {
  const username = document.getElementById('username').value;
  const password = document.getElementById('password').value;
  
  localStorage.setItem('username', username);
  localStorage.setItem('password', password);
  
  window.location.href = 'login.html';
}

function login() {
  const username = document.getElementById('username').value;
  const password = document.getElementById('password').value;
  
  const storedUsername = localStorage.getItem('username');
  const storedPassword = localStorage.getItem('password');
  
  if (username === storedUsername && password === storedPassword) {
    window.location.href = 'data.html';
  } else {
    alert('用户名或密码错误！');
  }
}

数据展示

function displayData() {
  const data = localStorage.getItem('data');
  const dataObject = JSON.parse(data);
  
  const output = document.getElementById('output');
  output.innerHTML = `
    <ul>
      ${dataObject.map((item) => `<li>${item}</li>`).join('')}
    </ul>
  `;
}

增删改查

添加数据

function addData() {
  const data = document.getElementById('data').value;
  const storedData = localStorage.getItem('data');
  let dataObject = [];
  
  if (storedData) {
    dataObject = JSON.parse(storedData);
  }
  
  dataObject.push(data);
  localStorage.setItem('data', JSON.stringify(dataObject));
  
  window.location.reload();
}

删除数据

function deleteData(index) {
  const storedData = localStorage.getItem('data');
  let dataObject = JSON.parse(storedData);
  
  dataObject.splice(index, 1);
  localStorage.setItem('data', JSON.stringify(dataObject));
  
  window.location.reload();
}

修改数据

function editData(index) {
  const storedData = localStorage.getItem('data');
  let dataObject = JSON.parse(storedData);
  const newData = document.getElementById('newData').value;
  
  dataObject[index] = newData;
  localStorage.setItem('data', JSON.stringify(dataObject));
  
  window.location.reload();
}