美文网首页
HTML - 存储 Local & Session St

HTML - 存储 Local & Session St

作者: 由宇婷 | 来源:发表于2017-08-08 18:15 被阅读41次

[一点点笔记]
需要HTML 和 JS .

注意区分:
Session storage:关闭浏览器就都没有了
local storage:存储于本地.


1 Session Storage

HTML

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>this is session storage</title>
    <script src ='sessionSave.js'>  </script>
</head>
<body>
<p id = 'msg'></p>
<input type="text" id="input">
<input type="button" value="save" onclick="saveStorage('input')">
<input type="button" value="load" onclick="loadStorage('msg')">
</body>
</html>

sessionSave.js

function saveStorage(id) {
    var target =document.getElementById(id);
    var str = target.value;
    sessionStorage.setItem("message",str);
}

function loadStorage(id) {
    var target =document.getElementById(id);
    var msg = sessionStorage.getItem("message");
    target.innerHTML =msg;
}
image.png

点击save保存, 点击load显示
刷新仍可继续显示,关闭浏览器内容丢失。
——————————————————————————————————————
2.local storage
只需把JS里的 sessionStorage 换成localStorage极客

image.png

点击save保存, 点击load显示
刷新仍可继续显示,关闭浏览器内容仍保留着。

相关文章

网友评论

      本文标题:HTML - 存储 Local & Session St

      本文链接:https://www.haomeiwen.com/subject/ptqxrxtx.html