localStorage与sessionStorage的用法及区别

137 阅读1分钟

1.localStorage

  • localStorage.setItem('key','value') 存数据 只能存字符串型
  • localStorage.getItem('key') 取数据 有返回值 返回value
  • localStorage.remove('key') 删除数据
  • localStorage.clear() 清空数据
<body>
    <button class="setItem">存数据</button>
    <button class="getItem">取数据</button>
    <button class="removeItem">删除数据</button>
    <button class="clear">清空数据</button>
    <script>
        document.querySelector('.setItem').onclick = function () {
            localStorage.setItem('username', '武洋')
            localStorage.setItem('sex', '男')
            localStorage.setItem('age', '18')
        }
        document.querySelector('.getItem').onclick = function () {
            console.log(localStorage.getItem('age'));
        }
        document.querySelector('.removeItem').onclick = function () {
            localStorage.removeItem('sex')
        }
        document.querySelector('.clear').onclick = function () {
            localStorage.clear()
        }
    </script>
</body>

2.sessionStorage

语法 与 localStorage 基本一致

  • sessionStorage.setItem('key','value') 存数据 只能存字符串型
  • sessionStorage.getItem('key') 取数据 有返回值 返回value
  • sessionStorage.remove('key') 删除数据
  • sessionStorage.clear() 清空数据

3.两者区别(面试)

都有储存空间大小的限制,一般为 5 Mb

localStorage: 硬盘储存

sessionStorage: 内存储存