本地存储之localStorage

1、生命周期永久生效，除非手动删除否则关闭页面也会存在

2、可以多窗口(页面)共享(同一浏览器可以共享)

3．以键值对的形式存储使用

存储数据：

获取数据：

删除数据：

删除所有数据：

代码示例：

<!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>
    <input type="text">
    <button class="set">存储数据</button>
    <button class="get">获取数据</button>
    <button class="remove">删除数据</button>
    <button class="del">清空所有数据</button>
</body>
<script>
    var ipt = document.querySelector('input')
    var set = document.querySelector('.set')
    var get = document.querySelector('.get')
    var remove = document.querySelector('.remove')
    var del = document.querySelector('.del')
    // 存储
    set.addEventListener('click', function () {
        var val = ipt.value
        localStorage.setItem('uname', val)
        localStorage.setItem('pws', val)
    })
    // 获取
    get.addEventListener('click', function () {
        var val = ipt.value
        localStorage.getItem('uname', val)
    })
    // 删除
    remove.addEventListener('click', function () {
        var val = ipt.value
        localStorage.removeItem('uname', val)
    })
    // 删除所有
    del.addEventListener('click', function () {
        var val = ipt.value
        localStorage.clear('uname', val)
    })
</script>

</html>