html学习笔记(12)
2015-08-13 15:24
603 查看
web storage:在web上储存数据:
这里的储存是针对客户端本地而言的,分为两种:
1.sessionStorage : 将数据保存在session对象中。session是指用户在浏览某个网站时,从进入网站到浏览器关闭所经过的这段时间,也就是用户浏览这个网站花费的时间,session对象可以用来保存在这段时间内所要求保存的任何数据。
2. localStorage: 将数据保存在客户端本地硬件设备中,即逝浏览器关闭类,该数据仍然存在,下一次打开浏览器时任然可以继续使用。
sessionStorage 实例,建立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="追加数据" onclick="saveStorage('memo')">
<input type="button" value="删除数据" onclick="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="保存" onclick="saveStorage()"></td></tr>
</table>
<hr>
<p>检索:
<input type="text" id="find">
<input type="button" value="检索" onclick="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;
}
这里的储存是针对客户端本地而言的,分为两种:
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="读取数据" onclick="saveStorage('input')"> <input type="button" value="读取数据" onclick="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="追加数据" onclick="saveStorage('memo')">
<input type="button" value="删除数据" onclick="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="保存" onclick="saveStorage()"></td></tr>
</table>
<hr>
<p>检索:
<input type="text" id="find">
<input type="button" value="检索" onclick="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;
}
相关文章推荐
- 织梦dedecms - 织梦5.7版本后台去除版权
- FCKeditor 及 xhEditor 使用详解——HTML可视化编辑器
- HTML 相对路径表示方法
- 将PDF转成HTML网页格式的方法
- Notepad++插件emmet快速写html笔记
- 8年,属于 HTML 5 春天的到来悄悄!
- html,子页面向父页面传递参数
- <!DOCTYPE html>的问题
- html中submit和button的区别(总结)
- html学习笔记(11)
- html 学习笔记(9)
- HTMl小知识
- html学习笔记(8)
- *+html功能
- 用浏览器打开本地html 直接到首页 的解决方法
- html之 《meta》设置缓存
- html 学习笔记(6)
- HTML颜色代码表
- 设置html页面不被浏览器缓存
- html实体转换