您的位置：首页 > Web前端 > HTML5

HTML5 | Web Storage

2017-07-24 17:56 375 查看

Web Storsge - 本地客户端存储数据功能
代替Cookies在客户端保存用户名等一些简单的用户信息

Cookies缺点：
大小限制在4KB
带宽浪费
难以操作

————————————————————————————————————————————

sessionStorage - 临时保存

把数据存储在session对象之中，session就是打开网站到关闭网站之间要求进行保存的数据

保存数据方法：2种
sessionStorage.setItem('key', 'value');
sessionStorage.key('value');

读取数据方法：2种
str = sessionStorage.getItem('key');
str = sessionStorage.key(index);

<<webstorage.js>>

function saveStorage(id) {
var str = document.getElementById(id).value; // 通过str来读取input输入的值
sessionStorage.setItem("name", str); // 通过方法存入sessionStorage
}

function readStorage(id) {
var target = document.getElementById(id);
var msg = sessionStorage.getItem("name"); // 读取sessionStorage的name值
target.innerHTML = msg;
}

<<index.html>>

<!DOCTYPE html>
<html>

<head>
</head>

<body>
<input type="text" id="txt">
<input type="button" value="保存数据" onclick="saveStorage('txt');">
<input type="button" value="读取数据" onclick="readStorage('msg');">
<p id="msg"></p>
</body>
<script type="text/javascript" src="webstorage.js"></script>

</html>

————————————————————————————————————————————

localStorage - 永久保存

信息存储在客户端本地，关闭网页后再次打开信息也存在

保存数据的方法：
localStorage.setItem('key', 'value');
localStorage.key('value');

读取数据的方法
str = localStorage.getItem('key');
str = localStorage.key(index); // 通过索引号

<<webstorage.js>>

function saveStorage(id) {
var str = document.getElementById(id).value; // 通过str来读取input输入的值
localStorage.setItem("name", str); // 通过方法存入sessionStorage
}

function readStorage(id) {
var target = document.getElementById(id);
var msg = localStorage.getItem("name"); // 读取sessionStorage的name值
target.innerHTML = msg;
}

————————————————————————————————————————————

简单的留言板

要求：在留言板中将留言时间与内容相匹配，具有保存、清除、读取功能

<<webstorage.js>>

// 保存数据
function saveStorage(id) {
var target = document.getElementById(id);
var str = target.value;
var time = new Date().getTime(); // 读取到毫秒数
localStorage.setItem(time, str);
loadStorage('msg'); // 保存的时候即显示
target.value = "";
}

// 加载数据
function loadStorage(id) {
var newElem = "<table>"; // 定义新DOM元素table
for (var i = 0; i < localStorage.length; i++) {
var loadTime = localStorage.key(i); // 通过索引获取key
var loadMsg = localStorage.getItem(loadTime); // 通过时间获取留言信息
var oTime = new Date(); // 创建Date对象
oTime.setTime(loadTime); // 将loadTime转换为时间对象
var strTime = oTime.toUTCString(); // 将时间对象字符串化
newElem += "<tr><td>" + (i + 1) + "</td><td>" + loadMsg + "</td><td>" + strTime + "</tr></td>"; // 在table中加上该行信息
}
newElem += "</table>"; // 给table闭合
var target = document.getElementById(id);
target.innerHTML = newElem;
}

// 清除数据
function clearStorage(id) {
localStorage.clear(); // 清除loaclStorage
loadStorage('msg');
}

<<index.html>>

<!DOCTYPE html>
<html>

<head>
<script type="text/javascript" src="webstorage.js"></script>
<style type="text/css">
#txt {
width: 300px;
height: 100px;
}

#msg table tr td {
border-top: 1px black solid;
}
</style>
</head>

<body>
<h1>留言板</h1>
<textarea id="txt" cols="60" rows="10"></textarea>
<br/>
<br/>
<input type="button" value="save" onclick="saveStorage('txt')" id="saveBtn">
<input type="button" value="clear" onclick="clearStorage('msg')" id="clearBtn">
<input type="button" value="load" onclick="loadStorage('msg')" id="loadBtn">
<hr/>
<div id="msg"></div>
</body>

</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航