Javascript本地存储localStorage看这一篇就够了-牛翰网

介绍

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