浏览器本地存储：localStorage详解与应用-CSDN博客

本文链接：https://blog.csdn.net/bubbleJessica/article/details/128685471

localStorage

localStorage了解

有些数据确实需要存储在本地，但是它却不需要发送到服务器，所以并不适合放在cookie中

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

它与cookie单独大小有限制类似，只不过单个域名下的localStorage总大小有限制

localStorage基本用法

与对象,Map相似，只不过它方法为：setItem() getItem() removeItem() clear()

// setItem()
    localStorage.setItem('username','alex');
    localStorage.setItem('username','zs');
    localStorage.setItem('age',18);
    localStorage.setItem('sex','male');
    console.log(localStorage.length);
    console.log(localStorage);

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

    // removeItem()
    localStorage.removeItem('username');
    console.log(localStorage);

    // clear()
    localStorage.clear();
    console.log(localStorage);

使用localStorage实现自动填充

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form id="login" action="https://www.imooc.com" method="post">
    <input type="text" name="username"/>
    <input type="password" name="password"/>
    <input type="submit" id="btn" value="登录"/>
</form>
<script>
    const loginForm=document.getElementById('login');
    const btn=document.getElementById('btn');
    const username=localStorage.getItem('username');
    if (username){
        loginForm.username.value=username;
    }
    btn.addEventListener('click',e=>{
        // 阻止默认提交
        e.preventDefault();
        // 数据验证
        localStorage.setItem('username',loginForm.username.value);
        // 手动提交
        loginForm.submit();
    },false);
</script>
</body>
</html>

localStorage的注意事项

localStorage的存储期限
localStorage键和值的类型
不同域名下不能共用localStorage

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

      // sessionStorage
      // 当会话结束（比如关闭浏览器）的时候，sessionStorage 中的数据会被清空
      sessionStorage.setItem('username', 'alex');
      sessionStorage.getItem('username');
      sessionStorage.removeItem('username');
      sessionStorage.clear();

      // 2.localStorage 键和值的类型
      // localStorage 存储的键和值只能是字符串类型
      // 不是字符串类型，也会先转化成字符串类型再存进去

      localStorage.setItem({}, 18);
      // // localStorage.setItem('students', [{},{}]);
      console.log(
         typeof localStorage.getItem('[object Object]'),
         localStorage.getItem('[object Object]')
       );

      console.log({}.toString());

      // 3.不同域名下能否共用 localStorage
      // 不同的域名是不能共用 localStorage 的

      // 4.localStorage 的兼容性
      // IE7及以下版本不支持 localStorage，IE8 开始支持

caniuse.com兼容性网站