JavaScript localStorage 本地存储完整指南

作者：拾光时间：2026-10-31 15:06:28浏览：344

本文详细介绍 JavaScript 中 localStorage 本地存储的核心用法。涵盖数据持久化特性、5MB 容量限制、键值对存储机制，以及 setItem、getItem、removeItem 等关键 API 的具体语法与代码示例。同时解析修改数据与字符串类型转换的注意事项，帮助开发者高效利用浏览器本地存储功能。

介绍

数据存储在用户浏览器中，其实是保存在硬盘中
页面刷新不丢失数据
sessionStorage和localStorage约 5M 左右

localStorage ：

使用 localStorage 可以将数据永久存储在本地电脑中，除非手动删除，否则关闭页面也会存在。
可以多窗口（页面）共享（同一浏览器可以共享）
以键值对的形式存储使用

存储数据到 localStorage

语法

localStorage.setItem(key, value)

示例

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <script>
    // 要存储一个名字
    localStorage.setItem('uname', 'tom')
  </script>
</body>

</html>

打开另外一个页面，localStorage 保存的信息照样存在：

获取 localStorage 的数据

语法

localStorage.getItem(key)

示例

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <script>
    // 要存储一个名字
    localStorage.setItem('uname', 'tom')
    // 获取本地存储
    console.log(localStorage.getItem('uname'))
  </script>
</body>

</html>

删除 localStorage 的数据

语法

localStorage.removeItem(key)

示例

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <script>
    // 要存储一个名字
    localStorage.setItem('uname', 'tom')
    // 获取本地存储
    // console.log(localStorage.getItem('uname'))
    localStorage.removeItem('uname')
  </script>
</body>

</html>

数据已经删除

修改 localStorage 的数据

修改 localStorage 的数据和 localStorage 新增数据的语法一样。执行 localStorage.setItem(key, value) 的时候，如果这个 key 已经存在，就是修改；如果这个 key 不存在，就是新增。

示例：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <script>
    // 要存储一个名字
    localStorage.setItem('uname', 'tom')
    // 获取本地存储
    // console.log(localStorage.getItem('uname'))
    // localStorage.removeItem('uname')
    // 修改数据
    localStorage.setItem('uname', 'andy')
  </script>
</body>

</html>

本地存储只能存储字符串

示例：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <script>
    // 保存年龄
    localStorage.setItem('age', 18)
    console.log(localStorage.getItem('age'))
    // 本地存储的是字符串类型
    console.log(typeof localStorage.getItem('age'))
  </script>
</body>

</html>

这个 18 是字符串类型：

总结

到此这篇关于 Javascript 本地存储 localStorage 的文章就介绍到这了，更多相关 Javascript 本地存储 localStorage 内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站！

作者最新文章

JS处理含Emoji或中文的字符串转数组乱码问题

2026-11-05 16:12:28

JS怎么使用展开运算符合并对象

2026-11-05 14:42:18

ES6+环境下判断JS对象为空的简洁写法

2026-11-05 12:12:23

怎么通过replacer函数自定义JS中JSON的格式化输出

2026-11-05 11:19:44

JS正则表达式基础：字面量与RegExp构造函数的区别及常用元字符

2026-11-05 11:16:58