Javascript：本地存储之localStorage

听海边涛声

已于 2024-06-27 20:24:57 修改

阅读量1.4k

点赞数 6

文章标签： javascript 开发语言 ecmascript

于 2024-06-27 20:21:48 首次发布

本文链接：https://blog.csdn.net/panghuangang/article/details/140022519

版权

介绍

数据存储在用户浏览器中，其实是保存在硬盘中
页面刷新不丢失数据
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>