Web Storage本地存儲

<!DOCTYPE html />
<html>
<head>
<meta charset="utf-8" />
</head>
<body>
<!--
HTML4使用cookies在客戶端保存簡單用戶信息，但cookie存儲永久數據有以下問題：
1.大小：cookies限制在4KB
2.帶寬：cookies隨HTTP一起發送，浪費帶寬
3.複雜性：要正確操縱cookies困難
HTML5提供了Web Storage功能，就是在Web上存儲數據的功能，分為：
sessionStorage：數據保存在session中。session用來保存用戶進入網站到瀏覽器關閉期間的任何數據
localStorage：數據保存在客戶本地硬盤中，即時瀏覽器關閉，數據仍存在
sessionStorage：
保存數據：sessionStorage.setItem(key,value);
讀取數據：sessionStorage.getItem(key);
localStorage：
保存數據：localStorage.setItem(key,value);
讀取數據：localStorage.getItem(key);
本地數據庫：
HTML5中內置了一個可通過SQL語言來訪問的數據庫
HTML5採用SQLLite這種數據庫作為本地數據庫
使用步驟：
1.創建訪問數據庫對象
var db = openDatabase('mydb','1.0','Test DB', 2*1024*1024);
參數依次：數據庫名，版本號，數據庫描述，數據庫大小。返回數據庫對象，不存在，則創建
2.使用事務處理
db.transaction(function(tx){
tx.executeSql('create table xx');
});
3.執行查詢
tx.executeSql(sqlquery,[],dataHandler,errorHandler);
例：tx.executeSql("update people set age=? where name=?;",[11,'66']);
dataHandler(transaction, results){...}
為執行SQL語句成功時回調函數
errorHandler(transaction, errmsg){...}
為執行SQL語句出錯時回調函數
當執行查詢時，results對象有一個rows屬性，保存了查詢的每條數據
可用以下方式獲取數據：
for(var i = 0;i<results.rows.length;i++){
rows[i];            //俄筆者使用此種格式在Chrome瀏覽器中無法訪問
rows.item(i);
}
-->
<input type="text" id="input" />
<div id="msg"></div>
<input type="button" value="保存數據" οnclick="saveStorage('input')" />
<input type="button" value="讀取數據" οnclick="loadStorage('msg')" />
<script type="text/javascript">
//保存數據
function saveStorage(id) {
var target = document.getElementById(id);
var str = target.value;
//sessionStorage.setItem("message", str);
localStorage.setItem("messageLocal", str);
};
//讀取數據
function loadStorage(id) {
var target = document.getElementById(id);
//var msg = sessionStorage.getItem("message");
var msg = localStorage.getItem("messageLocal");
target.innerHTML = msg;
};
</script>
<h1>簡單Web留言本</h1>
<textarea id="memo" cols="60" rows="10"></textarea><br />
<input type="button" value="追加" οnclick="save('memo');" />
<input type="button" value="初始化" οnclick="clearStorage();" />
<p id="msg2"></p>
<script type="text/javascript">
//保存數據
function save(id) {
var data = document.getElementById(id).value;
var time = new Date().getTime();
localStorage.setItem(time, data);
alert("數據已保存");
load("msg2");
};
//讀取數據
function load(id) {
var result = '';
for (var i = 0; i < localStorage.length; i++) {
//獲取key
var key = localStorage.key(i);
//獲取value
var value = localStorage.getItem(key);
result += (value + key) + '<br/>';
}
var target = document.getElementById(id);
target.innerHTML = result;
};
//清空數據
function clearStorage() {
localStorage.clear();
alert("清除全部數據");
load('msg2');
};
</script>
<h1>結合JSON對象(部份瀏覽器支持)，實現簡易數據庫</h1>
<div>
<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>電話</td>
<td><input type="text" id="tel" /></td>
</tr>
<tr>
<td colspan="2">
<input type="button" value="保存" οnclick="saveRecord();" />
</td>
</tr>
<tr>
<td colspan="2">
<input type="text" id="find" />
<input type="button" value="檢索" οnclick="findRecord('msg3');" />
</td>
</tr>
</table>
</div>
<div id="msg3"></div>
<script type="text/javascript">
function saveRecord() {
//構建一對象實例
var data = new Object();
data.name = document.getElementById('name').value;
data.email = document.getElementById('email').value;
data.tel = document.getElementById('tel').value;
//將該對象轉換為JSON格式的文本數據
var str = JSON.stringify(data);
//存儲數據
localStorage.setItem(data.name, str);
alert("數據已保存");
}
function findRecord(id) {
var find = document.getElementById('find').value;
//讀取數據
var str = localStorage.getItem(find);
//將localStorage中獲取的數據轉換為JSON對象，取其值
var data = JSON.parse(str);
var result = "姓名：" + data.name + "<br/>";
result += "EMAIL：" + data.email + "<br/>";
result += "電話：" + data.tel + "<br/>";
//顯示
var target = document.getElementById(id);
target.innerHTML = result;
}
</script>
<h1>使用HTML5內置數據庫，實現Web留言本</h1>
<div>
姓名：<input type="text" id="myName" />
留言：<input type="text" id="myMsg" />
<input type="button" value="保存" οnclick="saveDB();" />
<p id="datatable"></p>
</div>
<script type="text/javascript">
var datatable = null;
//打開數據庫連接，沒有則創建
var db = openDatabase('MyData', '', 'My Database Test', 102400);
//初始化數據庫，創建表
function init() {
datatable = document.getElementById('datatable');
showAllData();
};
//顯示數據庫表中所有信息
function showAllData() {
db.transaction(function (tx) {
//表不存在則創建
tx.executeSql("create table if not exists MsgData(name text,message text,time integer)", []);
//查詢表
tx.executeSql("select * from MsgData", [], function (tx, rs) {
removeAllData();
for (var i = 0; i < rs.rows.length; i++) {
showData(rs.rows.item(i));
}
});
});
};
//清空顯示數據
function removeAllData() {
for (var i = datatable.childNodes.length - 1; i >= 0; i--) {
datatable.removeChild(datatable.childNodes[i]);
}
};
//顯示數據
function showData(row) {
var div = document.createElement('div');
div.innerHTML = row.name + "：" + row.message + "  " + row.time;
datatable.appendChild(div);
};
//將數據保存至數據庫中
function saveDB() {
var name = document.getElementById("myName").value;
var msg = document.getElementById("myMsg").value;
var time = new Date().getTime();
addData(name, msg, time);
showAllData();
};
//添加一條記錄
function addData(name, msg, time) {
db.transaction(function (tx) {
tx.executeSql('insert into MsgData values(?,?,?)', [name, msg, time],
function (tx, rs) { alert("成功保存數據"); },
function (tx, error) { alert(error.source + "：" + error.message); });
});
};
//初始化
init();
</script>
</body>
</html>

Web Storage本地存儲相关推荐

HTML5权威指南--Web Storage,本地数据库,本地缓存API,Web Sockets API,Geolocation API(简要学习笔记二)...
1.Web Storage HTML5除了Canvas元素之外,还有一个非常重要的功能那就是客户端本地保存数据的Web Storage功能. 以前都是用cookies保存用户名等简单信息. 但是coo ...
H5本地储存Web Storage
一.本地存储由来的背景由于HTML4时代Cookie的大小.格式.存储数据格式等限制,网站应用如果想在浏览器端存储用户的部分信息,那么只能借助于Cookie.但是Cookie的这些限制,也就导致了C ...
html5 本地存储Web Storage
在过去本地存储数据基本都是使用cookies保存一些简单的数据,使用cookies存储永久数据存在以下几个问题: 1.cookies的大小被限制在4KB: 2.cookies是随HTTP事务一起发送的 ...
（五）HTML5本地存储——Web Storage
Web应用的发展,使得客户端存储使用得也越来越多,而实现客户端存储的方式则是多种多样.最简单而且兼容性最佳的方案是Cookie,但是作为真正的客户端存储,Cookie则存在很多致命伤.此外,在IE6及 ...
HTML5本地存储之Web Storage篇
2019独角兽企业重金招聘Python工程师标准>>> Web Storage是HTML5引入的一个非常重要的功能,在前端开发中经常用到,可以在客户端本地存储数据,类似HTML4的c ...
HTML5 本地存储（Web Storage）
HTML5 提供了两种在客户端存储数据的新方法: localStorage - 本地永久存储,下次打开浏览器数据依然存在 sessionStorage - 只存在于一个会话的数据存储,关闭浏览器数据会 ...
HTML5 本地存储 Web Storage
Web Storage Web Storage 是一项非常重要,并且很实用的技术,已经被大多数浏览器(包括IE8)所支持, 在HTML4时代, 虽然cookie无处不在,但cookie仍然有自己的硬伤 ...
HTML5 Web Storage用法
早期的网页数据存储只能依赖于cookies,但它存在着容量有限且很小,不便于复杂数据的管理等问题,此外,还需将cookies附带在每一次网络请求之中.HTML5的出现,极大地增加了开发人员的开发灵活度 ...
HTML5 基础知识，第 3 部分 HTML5 API 之应用-介绍HTML5 API 的用法和价值，Canvas 提供的创造性，以及Web storage的离线应用
HTML5 集设计者和开发者于一身,其主要任务就是构建高效的丰富 Internet 应用程序之富网络应用 (Rich Internet Application,简称RIA),尤其是富 UI(User ...

Web Storage本地存儲

Web Storage本地存儲相关推荐

最新文章

热门文章