浏览器缓存 localStorage 与sessionStorage

存储方式均是以键值对形式存储

添加存储
setItem(‘名称’,‘值’)
获取存储
getItem(‘名称’)
删除存储
removeItem（‘名称’）
清空缓存(清除所有记录)
clear()

sessionStorage 关闭浏览器后失效

 <input type="text">
 <button class="set">存储数据</button>
<button class="get">获取数据</button>
<button class="remove">删除数据</button>
<button class="del">清空所有数据</button>
<script>
    console.log(localStorage.getItem('username'));

    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;
        sessionStorage.setItem('uname', val);
        sessionStorage.setItem('pwd', val);
    });
    get.addEventListener('click', function() {
        // 当我们点击了之后，就可以把表单里面的值获取过来
        console.log(sessionStorage.getItem('uname'));

    });
    remove.addEventListener('click', function() {
        // 
        sessionStorage.removeItem('uname');

    });
    del.addEventListener('click', function() {
        // 当我们点击了之后，清除所有的
        sessionStorage.clear();

    });
    </script>

localStorage 保存在浏览器中

<input type="text">
<button class="set">存储数据</button>
<button class="get">获取数据</button>
<button class="remove">删除数据</button>
<button class="del">清空所有数据</button>
<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('username', val);
    })
    get.addEventListener('click', function() {
        console.log(localStorage.getItem('username'));

    })
    remove.addEventListener('click', function() {
        localStorage.removeItem('username');

    })
    del.addEventListener('click', function() {
        localStorage.clear();

    })
</script>