浏览器本地存储 WebStorage包括localstorage sessionstorage

一、概念

浏览器端通过sessionstorage和localstorage属性来实现本地存储

 二、相关API

// 设置，key value，key若存在，则则更新value，value为字符串，需要使用JSON
localStorage.setItem('msg', 'Hello')
sessionStorage.setItem('msg', 'Hello')

// 获取value，根据key，value是字符串，需要反序列化
localStorage.getItem('msg')
sessionStorage.getItem('msg')

// 删除key value 根据key
localStorage.removeItem('person')
sessionStorage.removeItem('person')

//清空本地的存储
localStorage.clear()
sessionStorage.clear()

三、重点

1、sessionstorage存储的数据随着浏览器的关闭而消失

2、localstorage存储的数据，必须要手动清除才会消失

3、getitem没用对应的key，vlaue为null

4、JSON.parse(null)，任为null

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>localStroage</title>
</head>
<body>
    <div>
        <button onclick="saveData()">保存数据</button>
        <button onclick="getData()">获取数据</button>
        <button onclick="deleteData()">删除数据</button>
        <button onclick="clearData()">清空数据</button>
    </div>
    <script>
        function saveData(){
            localStorage.setItem('msg', 'Hello')
            localStorage.setItem('person', JSON.stringify({name:'jojo', age:29}))
        }

        function getData(){
            console.log(localStorage.getItem('msg'))
            console.log(JSON.parse(localStorage.getItem('person')))
        }
        function deleteData(){
            localStorage.removeItem('person')
        }
        function clearData(){
            localStorage.clear()
        }
    </script>
</body>
</html>

 

posted @ 2025-01-04 23:03  市丸银  阅读(30)  评论(0)    收藏  举报