html学习笔记（12）

最新推荐文章于 2024-08-13 10:10:57 发布

thystar

最新推荐文章于 2024-08-13 10:10:57 发布

阅读量498

点赞数

分类专栏： html

本文链接：https://blog.csdn.net/thystar/article/details/47504805

版权

html 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

web storage：在web上储存数据：

这里的储存是针对客户端本地而言的，分为两种：

1.sessionStorage ：将数据保存在session对象中。session是指用户在浏览某个网站时，从进入网站到浏览器关闭所经过的这段时间，也就是用户浏览这个网站花费的时间，session对象可以用来保存在这段时间内所要求保存的任何数据。

2. localStorage：将数据保存在客户端本地硬件设备中，即逝浏览器关闭类，该数据仍然存在，下一次打开浏览器时任然可以继续使用。

sessionStorage 实例，建立html文件：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="sdemojs.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>
</html>

sdemojs.js:

<pre class="javascript" name="code">/**
 * Created by Sindy on 2015/8/13.
 */
function saveStorage(id){
    var target = document.getElementById(id);
    var str = target.value;
    // 保存数据的方法 key value 形式
    sessionStorage.setItem("message", str);

}

function loadStorage(id){
    var target = document.getElementById(id);
    //读取数据
    var msg = sessionStorage.getItem("message");
    target.innerHTML = msg;
}

localStorage实例：

将js文件改为：

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

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

简单的web留言本

.html;

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="web2js.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>
</html>

.js:

/**
 * Created by Sindy on 2015/8/13.
 */

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.setTime(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');
}

作为简单数据库利用：

.html;

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="web3js.js"></script>
</head>
<body>
<table>
    <tr><td>姓名</td><td><input type="text" id="name"></td></tr>
    <tr><td>Email</td><td><input type="text" id="email"></td></tr>
    <tr><td>Tel</td><td><input type="text" id="tel"></td></tr>
    <tr><td>备注</td><td><input type="text" id="memo"></td></tr>
    <tr><td></td><td><input type="button" value="保存" οnclick="saveStorage()"></td></tr>
</table>
<hr>
<p>检索：
    <input type="text" id="find">
    <input type="button" value="检索" οnclick="findStorage('msg')">
</p>
<p id="msg"></p>
</body>
</html>

.js

/**
 * Created by Sindy on 2015/8/13.
 */

function saveStorage(){
    var data = new Object;
    data.name = document.getElementById("name").value;
    data.email = document.getElementById("email").value;
    data.tel = document.getElementById("tel").value;
    data.memo = document.getElementById("memo").value;
    var str = JSON.stringify(data);
    localStorage.setItem(data.name, str);
    alert("数据已经保存");
}

function findStorage(id){
    var find = document.getElementById('find').value;
    var str = localStorage.getItem(find);
    //解析JSON
    var data = JSON.parse(str);
    var result = "姓名" + data.name + "<br>";
        result += "Email" + data.email + "<br>";
        result += "Tel" + data.tel + "<br>";
        result += "备注" + data.memo + "<br>";
    var target = document.getElementById('msg');
    target.innerHTML = result;

}