首页 计算机学科 web 前后端交互

# 初始 localStorage

# localStorage 是什么

localStorage 也是一种浏览器存储数据的方式 (本地存储)，它只是存储在本地，不会发送到服务器端。

单个域名下的 localStorage 总大小有限制。

# 在浏览器中操作 localStorage

# localStorage 的基本用法

console.log(localStorage)

image-20230529160720332

# 向 localStorage 中添加数据

localStorage.setItem('username','zhangsan')
localStorage.setItem('username','lisk')
localStorage.setItem('age',18)
localStorage.setItem('sex','male')

image-20230529160746545

# 获取 localStorage 中的数据

console.log(localStorage.getItem('username'))
console.log(localStorage.getItem('age'))
// 获取不存在的返回 null
console.log(localStorage.getItem('name'))

image-20230529161039653

删除 localStorage 中的数据

localStorage.removeItem('username')
localStorage.removeItem('age')
console.log(localStorage)

image-20230529161250485

清空 localStorage 中所有数据

localStorage.clear()

image-20230529161408488

# 使用 localStorage 实现自动填充

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
   </head>
   <body>
      <form id="login" action="#" method="post">
         <input type="text" name="username"/><br>
         <input type="password" name="password"/><br>
         <button id="nth" type="submit">提交</button>
      </form> 
      <script>
         // 通过 id 获取 form 标签
         let loginForm = document.getElementById('login')
         // 通过 id 获取按钮标签
         let nth = document.getElementById('nth')
         // 从 localStorage 中获取 username 的值
         const username = localStorage.getItem('username')
         // 判断是否为 null
         if(username){
            // 不为 null 则赋值给 username 里
            loginForm.username.value = username
         }
         // 绑定点击事件
         nth.addEventListener('click',e => {
            // 阻止默认的点击事件执行
            e.preventDefault()
            // 将获取到 username 中的 value 添加到 localStorage 中
            localStorage.setItem('username',loginForm.username.value)
            // 执行提交事件
            loginForm.submit()
         })
      </script>
   </body>
</html>

image-20230529164617853

image-20230529164606522

# localStorage 的注意事项

# localStorage 的存储期限

localStorage 是持久化的本地存储，除非手动清除 (比如通过 js 删除，或者清除浏览器缓存)，否则数据是永远不会过期的。

sessionStorage

当会话结束 (比如关闭浏览器) 的时候，sessionStorage 中的数据会被清空

sessionStorage.setItem('username','zhangsan')
sessionStorage.getItem('username')
sessionStorage.removeItem('username')
sessionStorage.clear()

# localStorage 键和值的类型

localStorage 存储的键和值 <font color=red> 只能是字符串类型 </font>.

不是字符串类型，也会先转化为字符串类型再存进去

# 不同域名下能否共用 localStorage

不同的域名是不能共用 localStorage 的

# localStorage 的兼容性

查询网站：https://caniuse.com/

image-20230529170617884