数据存储之localStorage与sessionStorage异同点和应用

夏了夏天吖
132 阅读1分钟

数据存储之localStorage与sessionStorage异同点

相同点

1.作用一致:

  • 都是存储数据,存储大小:5MB,只能存储字符串

2.语法一致:

  • 设置：setItem('属性名',属性值)
  • 获取： getItem('属性名)
  • 删除： removeItem('属性名)
  • 清空： clear()

不同点

  • 存储方式不同

    • localStorage : 永久存储 数据存在硬盘中

    • sessionStorage : 临时存储 数据存在内存中, 页面一旦关闭数据自动清空

localStorage : 本地存储

* 经典应用场景：免登录

示例代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <button class="setItem">存数据</button>
    <button class="getItem">取数据</button>
    <button class="removeItem">删除数据</button>
    <button class="clear">清空数据</button>
    <script>
      
        //存数据 ：  localStorage.setItem('属性名',属性值)
        document.querySelector('.setItem').onclick = function(){
            localStorage.setItem('username','summer')
            localStorage.setItem('password','20220310')
            localStorage.setItem('age',{name:'111'})
        }

        //取数据 ：  localStorage.getItem('属性名')
        document.querySelector('.getItem').onclick = function(){
            //读取数据有返回值
            let uname =  localStorage.getItem('username')
            console.log(uname)
        }

        // 删数据 :   localStorage.removeItem('属性名')
        document.querySelector('.removeItem').onclick = function(){
            localStorage.removeItem('age')
        }

        //清空数据 : localStorage.clear()
        document.querySelector('.clear').onclick = function(){
            localStorage.clear()
        }
        
    </script>
</body>
</html>

sessionStorage : 临时存储

* 经典应用场景： 页面间传值

示例代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <button class="setItem">存数据</button>
    <button class="getItem">取数据</button>
    <button class="removeItem">删除数据</button>
    <button class="clear">清空数据</button>
    <script>
    
        //存数据 ：  sessionStorage.setItem('属性名',属性值)
        document.querySelector('.setItem').onclick = function(){
            sessionStorage.setItem('username','summer')
            sessionStorage.setItem('password','20220310')
            sessionStorage.setItem('age',30)
        }

        //取数据 ：  sessionStorage.getItem('属性名')
        document.querySelector('.getItem').onclick = function(){
            //读取数据有返回值
            let uname =  sessionStorage.getItem('username')
            console.log(uname)
        }

        // 删数据 :   sessionStorage.removeItem('属性名')
        document.querySelector('.removeItem').onclick = function(){
            sessionStorage.removeItem('age')
        }

        //清空数据 : sessionStorage.clear()
        document.querySelector('.clear').onclick = function(){
            sessionStorage.clear()
        }
        
    </script>
</body>
</html>
avatar
文章
阅读
粉丝