HTML本地数据库localeStorage的应用

localeStorage以键值对 的方式存储数据

HTML文件:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>webStorage本地存储1</title>
    <script src="js/5web.js"></script>
</head>
<body>
<p id="msg"></p><br>
<textarea cols="10" id="memo" rows="8"></textarea><br>
<input type="button" value="追加数据" onclick="saveStorage('memo')">
<input type="button" value="删除数据" onclick="clearStorage()">
</body>
</html>

js文件:

/**
 * Created by zhang on 2016/4/30.
 */
function saveStorage(id) {
    var element = document.getElementById(id);
    var value = element.value;
    var time = new Date().getTime();
    localStorage.setItem(time, value);
    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);
        result += "<tr><td>" + value + "</td><td>" + new Date().setTime(key) + "</td></tr>"
    }
    result += "</table>"
    var element = document.getElementById(id);
    element.innerHTML = result;
}
function clearStorage() {
    localStorage.clear();
    alert("数据已经清除");
    loadStorage('msg')
}




你可能感兴趣的:(html本地存储)