WebStorage

最新推荐文章于 2022-08-01 22:23:18 发布

cba142536

最新推荐文章于 2022-08-01 22:23:18 发布

阅读量208

点赞数

分类专栏： HTML5+CSS3

本文链接：https://blog.csdn.net/cba142536/article/details/54604632

版权

HTML5+CSS3 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

1. sessionStorage  只能保存从浏览页面开始到关闭浏览器期间所要保存的所有数据。

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="web01-1.js"></script>
</head>
<body>
<p id="msg"> </p>
<input type="text" id="input">
<input type="button" value="保存数据" οnclick="saveStorage('input')">
<input type="button" value="读取数据" οnclick="loadStorage('msg') ">
</body>

function saveStorage(id) {
    var target=document.getElementById(id);
    var str=target.value;
    sessionStorage.setItem("message",str);
    alert("保存成功！");
}
function loadStorage(id) {
    var target=document.getElementById(id);
    var msg=sessionStorage.getItem("message");
    target.innerHTML=msg;
}
2. localStorage   将数据保存在客户端本地硬件设备中，即使浏览器被关闭了，数据依然存在。

function saveStorage(id) {
    var target=document.getElementById(id);
    var str=target.value;
    localStorage.setItem("message",str);
    alert("保存成功！");
}
function loadStorage(id) {
    var target=document.getElementById(id);
    var msg=localStorage.getItem("message");
    target.innerHTML=msg;
}

3.简单web留言本

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="web02.js"></script>
</head>
<body>
<p id="msg"></p>
<textarea id="memo" cols="60" rows="10"></textarea>  <br/>
<input type="button" value="追加数据" οnclick="saveStorage('memo')">
<input type="button" value="删除数据" οnclick="clearStorage() ">
</body>

function saveStorage(id) {
    var data=document.getElementById(id).value;
    var time=new Date().getTime();
    localStorage.setItem("time",data);
    alert("保存成功！");
    loadStorage("msg");
}
function loadStorage(id) {
    var result="<table border='1'>";
    for(var i=0;i<localStorage.length;i++){
        var key=localStorage.key(i);
        var value=localStorage.getItem(key);
        var date=new Date();
        date.getTime(key);
        result +="<tr><td>"+value+"</td><td>"+date+"</td></tr>";
    }
    result +="</table>";
    var target=document.getElementById(id);
    target.innerHTML=result;
}
function clearStorage() {
    localStorage.clear();
    alert("数据已经删除！");
    loadStorage('msg');
}

cba142536

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
WebStorage

1. sessionStorage 只能保存从浏览页面开始到关闭浏览器期间所要保存的所有数据。head> meta charset="UTF-8"> title>Titletitle> script src="web01-1.js">script>head>body>p id="msg"> p>input type="text" id="input">inp
复制链接

扫一扫

专栏目录