localStorage存储数据基本使用方法

190 阅读1分钟

localStorage :本地存储

    // 1.语法
    //   存数据:localStorage.setItem('属性名','属性值')
    //   取数据:localStorage.getItem('属性名')
    //   删数据:localStorage.removaItem('属性名')
    //   清空数据:localStorage.clear()
    // 2.注意点
    //   3.1永久存储:数据存在硬盘中
    //   3.2只能存储string类型数据,如果存储其他类型编译器会自动
    //       转换string类型存储
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <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('uname', '吴某凡')
                localStorage.setItem('age', '31')
                localStorage.setItem('gender', '男')
                localStorage.setItem('hobby', 'playPlane')
            }
            //   取数据:localStorage.getItem('属性名')
        document.querySelector('.getItem').onclick = function() {
                let uname = localStorage.getItem('uname')
                console.log(uname);
            }
            //   删数据:localStorage.removaItem('属性名')
        document.querySelector('.removeItem').onclick = function() {
                localStorage.removeItem('age')
            }
            //   清空数据:localStorage.clear()
        document.querySelector('.clear').onclick = function() {
            localStorage.clear()
        }
    </script>
</body>

</html>