----webStorage----

原创于 2019-08-14 19:20:27 发布 · 67 阅读

CC 4.0 BY-SA版权

本文深入探讨了JavaScript中sessionStorage和localStorage的使用方法及其区别。sessionStorage在浏览器关闭或页面重新加载后数据消失，而localStorage则持久保存数据，除非手动清除Cookie。通过两个函数saveStorage和loadStorage展示了如何在网页中实现数据的存储和读取。

在这里插入图片描述

<script>
function saveStorage(id) {
    let target = document.getElementById(id);
    let str = target.value;
    // 保存数据的方法 key-value的形式
    sessionStorage.setItem('message', str);
}

function loadStorage(id) {
    let target = document.getElementById(id);
    // 读取数据
    let msg = sessionStorage.getItem('message');
    target.innerHTML = msg;
}
</script>

<script>
function saveStorage(id) {
    let target = document.getElementById(id);
    let str = target.value;
    // 保存数据的方法 key-value的形式
    localStorage.setItem('message', str);
}

function loadStorage(id) {
    let target = document.getElementById(id);
    // 读取数据
    let msg = localStorage.getItem('message');
    target.innerHTML = msg;
}
</script>

sessionStorage–关闭浏览器或重新打开页面时，存储的数据不再出现了

localStorage–数据一直存在，只有清除Cookie后才消失。