HTML5 Web存储
客户端存储数据的两个对象为:
localStorage 和 sessionStorage
localStorage
用于长久保存整个网站的数据,保存的数据没有过期时间,知道手动去除。
sessionStorage
用于临时保存同一窗口(或标签页的数据,在关闭窗口或标签页之后将会删除这些数据)
localStorage 对象存储的数据没有时间限制。第二天、第二周或下一年之后,数据依然可用.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>对象存储</title>
</head>
<body>
<div id="result"></div>
<script>
if(typeof(Storage)!=="undefined")
{
// 存储
localStorage.setItem("kk", "海公牛");
// 查找
document.getElementById("result").innerHTML = "网站名:" + localStorage.getItem("kkk");
}
else
{
document.getElementById("result").innerHTML="对不起,您的浏览器不支持 web 存储。";
}
</script>
</body>
</html>
不管是 localStorage,还是 sessionStorage,可使用的API都相同,常用的有如下几个(以localStorage为例):
1、保存数据:localStorage.setItem(key,value);
2、读取数据:localStorage.getItem(key);
3、删除单个数据:localStorage.removeItem(key);
4、删除所有数据:localStorage.clear();
5、得到某个索引的key:localStorage.key(index);
提示: 键/值对通常以字符串存储,你可以按自己的需要转换该格式。
Web Storage 开发一个简单的网站列表程序
网站列表程序实现以下功能:
1、可以输入网站名,网址,以网站名作为key存localStorage;
2、根据网站名,查找网址;
3、列出当前已保存的所有网站;
以下代码用于保存与查找数据(save() 与 find() 方法):
//保存数据
function save(){
var siteurl = document.getElementById("siteurl").value;
var sitename = document.getElementById("sitename").value;
localStorage.setItem(sitename, siteurl);
alert("添加成功");
}
//查找数据
function find(){
var search_site = document.getElementById("search_site").value;
var sitename = localStorage.getItem(search_site);
var find_result = document.getElementById("find_result");
find_result.innerHTML = search_site + "的网址是:" + sitename;
}
完整实例演示如下:
<!DOCTYPE html>
<html>
<head>
<title>网站列表程序</title>
<script>
function saveWebsite() {
var name = document.getElementById("name").value;
var url = document.getElementById("url").value;
// 使用网站名作为key,将网址存入localStorage
localStorage.setItem(name, url);
// 清空输入框
document.getElementById("name").value = "";
document.getElementById("url").value = "";
// 刷新网站列表
displayWebsites();
}
function searchWebsite() {
var name = document.getElementById("search").value;
// 根据网站名查找网址
var url = localStorage.getItem(name);
if(url) {
alert("网址:" + url);
} else {
alert("未找到该网站!");
}
}
function displayWebsites() {
var websitesDiv = document.getElementById("websites");
websitesDiv.innerHTML = "";
// 遍历localStorage中的所有网站
for(var i = 0; i < localStorage.length; i++) {
var name = localStorage.key(i);
var url = localStorage.getItem(name);
// 创建网站列表项
var websiteItem = document.createElement("li");
websiteItem.textContent = name + ": " + url;
// 将网站列表项添加到列表中
websitesDiv.appendChild(websiteItem);
}
}
</script>
</head>
<body>
<h1>网站列表</h1>
<label for="name">网站名:</label>
<input type="text" id="name"><br>
<label for="url">网址:</label>
<input type="text" id="url"><br>
<button onclick="saveWebsite()">保存网站</button>
<h2>查找网站</h2>
<label for="search">网站名:</label>
<input type="text" id="search">
<button onclick="searchWebsite()">查找</button>
<h2>已保存的网站</h2>
<ul id="websites"></ul>
<script>
// 页面加载时显示已保存的网站
displayWebsites();
</script>
</body>
</html>
效果图如下:
这只是非常简单的存储与查找,更多情况下我们存储的数据会更复杂。
接下来我们将使用 JSON.stringify 来存储对象数据、JSON.stringify 可以将对象转换为字符串
var site = new Object;
…
var str = JSON.stringify(site);//将对象转换为字符串
之后我们使用 JSON.parse 方法将字符串转换为 JSON 对象
var site = JSON.parse(str);
增加了删除方法,并简单优化了添加和删除,每次执行完都会刷新页面显示的最新操作的数据
//删除数据
function del(name) {
localStorage.removeItem(name);
alert(“删除成功!”);
loadAll();
}
存储练习:写一个登陆页面把账号密码都储存起来:
<!DOCTYPE html>
<html>
<head>
<title>写一个登陆页面把账号密码储存起来</title>
<script>
function login() {
var username = document.getElementById("username").value;
var password = document.getElementById("password").value;
localStorage.setItem("username", username);
localStorage.setItem("password", password);
}
</script>
</head>
<body>
<form onsubmit="event.preventDefault(); login();">
<label for="username">账号:</label>
<input type="text" id="username" required><br>
<label for="password">密码:</label>
<input type="password" id="password" required><br>
<input type="submit" value="登录">
</form>
</body>
</html>