HTML5 Web Storage

最新推荐文章于 2024-04-26 09:00:31 发布

hwaphon

最新推荐文章于 2024-04-26 09:00:31 发布

阅读量949

点赞数

分类专栏：个人随笔文章标签： html5 web 数据

本文链接：https://blog.csdn.net/hwaphon/article/details/52452765

版权

个人随笔专栏收录该内容

1 篇文章 0 订阅

订阅专栏

本篇文章仅为个人随笔，方便日后查阅，不提供任何解释。

sessionStorage 保存数据

使用这种方法保存的数据会在浏览器关闭之后全部消失，关键 JS 代码如下所示

function saveData(id) {

    var target = document.getElementById(id);
    var data = target.value;
    sessionStorage.setItem("message", data);
}

function loadData(id) {

    var target = document.getElementById(id);
    var data = sessionStorage.getItem("message");
    target.innerHTML = data;
}

可见这是一种键值对的保存方式，如同 Java 中的 map。

Web Storage 保存数据

这种方式保存的数据会永久存在，也就是说即使关闭了浏览器，在下次打开浏览器的时候，保存的数据会仍然存在。关键 JS 代码如下所示

function saveData(id) {
    var target = document.getElementById(id);
    var data = target.value;
    localStorage.setItem("message", data);
}

function loadData(id) {
    var target = document.getElementById(id);
    var data = localStorage.getItem("message");
    target.innerHTML = data;
}

使用 Web Storage 实现简易留言板

function saveData(id) {
    var target = document.getElementById(id);
    var data = target.value;
    var time = new Date().getTime();
    localStorage.setItem(time, data);
    alert("Save Success !");
    loadData('msg')
}

function loadData(id) {

    var result = "<table border = '1'>";
    for (var i = 0; i < localStorage.length; i++) {
        var key = localStorage.key(i);
        var data = localStorage.getItem(key);
        var time = new Date();
        time.setTime(key);
        result += "<tr><td>" + data + "</td><td>" + time + "</td></tr>>";
    }
    result += "</table>";
    var target = document.getElementById(id);
    target.innerHTML = result;
}

function clearData() {
    localStorage.clear();
    alert("Delete Success !");
    loadData('msg');
}

模拟数据库

function saveData() {
    var data = new Object();

    data.name = document.getElementById("name").value;
    data.email = document.getElementById("email").value;
    data.tel = document.getElementById("tel").value;
    data.address = document.getElementById("address").value;

    var str = JSON.stringify(data);
    localStorage.setItem(data.name, str);
    alert("Save Success !");
}

function findData(id) {

    var find = document.getElementById("find").value;
    var str = localStorage.getItem(find);
    var data = JSON.parse(str);

    var result = "姓名 ： " + data.name + "<br/>";
    result += "电话 : " + data.tel + "<br/>";
    result += "Email : " + data.email + "<br/>";
    result += "地址 : " + data.address + "<br/>";

    var target = document.getElementById(id);
    target.innerHTML = result;
}

HTML5 编码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="JS3.js"></script>>
</head>
<body>

<table border="0px">
    <tr>
        <td>姓名</td>
        <td><input type="text" id="name"></td>
    </tr>

    <tr>
        <td>电话</td>
        <td><input type="text" id="tel"></td>
    </tr>

    <tr>
        <td>Email</td>
        >
        <td><input type="text" id="email"></td>
        >
    </tr>

    <tr>
        <td>地址</td>
        <td><input type="text" id="address"></td>
    </tr>

</table>
<input type="button" value="保存" onclick="saveData()">
<hr>

<input type="text" id="find">
<input type="button" value="检索" onclick="findData('msg')">

<p id="msg"></p>

</body>
</html>

hwaphon

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
HTML5 Web Storage

本篇文章仅为个人笔记，方便日后查阅，不提供任何解释。sessionStorage 保存数据使用这种方法保存的数据会在浏览器关闭之后全部消失，关键 JS 代码如下所示function saveData(id) { var target = document.getElementById(id); var data = target.value; sessionS
复制链接

扫一扫