编程技术

sessionStorage的使用笔记

前言

之前公司同事问我项目如何做到页面和页面之间的值传递,当时我很傻很天真的认为写个所谓的“全局变量”即可…

事实上我想多了,之后我在开发项目中,采取那个方案实在是太…mdzz

于是在网上查找相关的解决方案。

sessionStorage 属性允许你访问一个 session Storage 对象。它与 localStorage 相似,不同之处在于 localStorage 里面存储的数据没有过期时间设置,而存储在 sessionStorage 里面的数据在页面会话结束时会被清除。页面会话在浏览器打开期间一直保持,并且重新加载或恢复页面仍会保持原来的页面会话。在新标签或窗口打开一个页面会初始化一个新的会话,这点和 session cookie 的运行方式不同。

于是自己大致的摸索下,还不错:


请输入你的名字:<input id="field" type="text" value="" title="名字"/>
<br />
获取你的名字:<a id="fieuser"></a>

<script type="text/javascript">
    // 获取文本输入框
    var field = document.getElementById("field");

    // 检测是否存在 username 键值
    // (这个会在页面偶然被刷新的情况下存在)
    if (sessionStorage.getItem("username")) {
        // 恢复文本输入框的内容
        field.value = sessionStorage.getItem("username");
    }

    // 监听文本输入框的 change 事件
    field.addEventListener("change", function() {
        // 保存结果到 sessionStorage 对象中
        sessionStorage.setItem("username", field.value);
    });

    document.getElementById("fieuser").innerHTML = sessionStorage.getItem("username");
</script>

浏览器开发者模式查看:

本站内容遵循知识共享署名-非商业性使用-相同方式共享4.0 国际许可协议

转载原创文章请注明转自:sessionStorage的使用笔记

发表评论

理性发言,共建美好精神家园!