浏览器本地存储：localStorage、sessionStorage

陌一一

已于 2022-10-15 21:49:24 修改

阅读量720

点赞数

分类专栏： web前端开发文章标签： html javascript 前端开发语言 web

于 2022-10-15 21:47:50 首次发布

本文链接：https://blog.csdn.net/a1598452168YY/article/details/127338327

版权

web前端开发专栏收录该内容

281 篇文章 16 订阅

订阅专栏

应用场景：每次我们登录一个网站时，下面就会有一个“记住密码”的选框供我们勾选，我们勾选了以后它就会把我们的用户名和密码等信息存储在浏览器上，当我们下次登录时，它就会把信息自动填在这个对应位置。。

功能实现：一点这个小按钮，就会把我们的信息给保存、取出、删除或者清空

（1）localStorage：长久存储、关闭页面存储信息也不会丢失

 //增
 localStorage.setItem("name","yiyi")
 //取
 localStorage.getItem("name")
 //删
 localStorage.removeItem("name")
 //清空所有数据
 localStorage.clear()

配合按钮实现：

<body>
    <button id="btn1">增</button>
    <button id="btn2">取</button>
    <button id="btn3">删</button>
    <button id="btn4">清空</button>
    <script>
        btn1.onclick  = function(){
            //增
            localStorage.setItem("name","yiyi")
        }

        btn2.onclick  = function(){
            //取
            console.log(localStorage.getItem("name"))
        }

        btn3.onclick  = function(){
            //删
            localStorage.removeItem("name")
        }

        btn4.onclick  = function(){
            //清空所有数据
            localStorage.clear()
        }    
    </script>
</body>

存储的数据都在下面这个地：

注意一下：

① 改数据，直接更改“增代码”里面的第二个参数value，结果就会覆盖上一次的value值，但是要保证key值不变；

② 存数据的时候，参数只能是字符串，不能是其他的数据结构；

（2）sessionStorage：会话存储也称短期存储、关闭页面存储信息会丢失

 //增
 sessionStorage.setItem("name","yiyi")
 //取
 sessionStorage.getItem("name")
 //删
 sessionStorage.removeItem("name")
 //清空所有数据
 sessionStorage.clear()

代码：

<body>
    <button id="btn1">增</button>
    <button id="btn2">取</button>
    <button id="btn3">删</button>
    <button id="btn4">清空</button>
    <script>
        btn1.onclick  = function(){
            //增
            sessionStorage.setItem("age","11")
        }

        btn2.onclick  = function(){
            //取
            console.log(sessionStorage.getItem("name"))
        }

        btn3.onclick  = function(){
            //删
            sessionStorage.removeItem("name")
        }

        btn4.onclick  = function(){
            //清空所有数据
            sessionStorage.clear()
        }    
    </script>
</body>

存储位置在：