程式師世界 >> 數據庫知識 >> MYSQL數據庫 >> MySQL綜合教程 >> MySQL統計函數GROUP_CONCAT應用圈套剖析

MySQL統計函數GROUP_CONCAT應用圈套剖析

編輯：MySQL綜合教程

MySQL統計函數GROUP_CONCAT應用圈套剖析。本站提示廣大學習愛好者：（MySQL統計函數GROUP_CONCAT應用圈套剖析）文章只能為提供參考，不一定能成為您想要的結果。以下是MySQL統計函數GROUP_CONCAT應用圈套剖析正文

媒介

本章重要內容是Web Storage與當地數據庫，個中Web Storage 是對cookie的優化，當地數據庫是HTML5新增的一個功效，應用它可以在客戶端樹立一個數據庫

年夜年夜加重辦事器真個累贅，加速拜訪數據速度。

進修本章須要控制Web Storage根本概念，懂得sessionStorage與localStorage的應用與差異

控制當地數據庫的應用

甚麼是WebStorage？

後面說過，webstorage是對cookie的優化而來，HTML4中應用cookie在客戶端存儲用戶數據，歷久應用發明存在以下成績：

年夜小限制在4kbcookie每次隨HTTP事務一路發送，糟蹋帶寬准確操作cookie很龐雜（這個有待斟酌）

因為以上成績，HTML5提出WebStorage作為新的客戶端當地保留技巧。

Web Storage 技巧在web上存儲數據即針對客戶端當地；詳細來講分為兩種：
sessionStrage：
session即會話的意思，在這裡的session是指用戶閱讀某個網站時，從進入網站到封閉網站這個時光段，session對象的有用期就只要這麼長。</p> <p>localStorage：
將數據保留在客戶端硬件裝備上，不論它是甚麼，意思就是下次翻開盤算機時刻數據還在。</p> <p>二者差別就是一個作為暫時保留，一個具有歷久保留。

應用示例

簡略運用
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<h1>
Web Storage 試驗</h1>
<div id="msg" >
</div>
<input type="text" id="text" />
<select id="type">
<option value="session">sessionStorage</option>
<option value="local">localStorage</option>
</select>
<button onclick="save();">
保留數據</button>
<button onclick="load();">
讀取數據</button>
<script type="text/javascript">
var msg = document.getElementById('msg'),
text = document.getElementById('text'),
type = document.getElementById('type');

function save() {
var str = text.value;
var t = type.value;
if (t == 'session') {
sessionStorage.setItem('msg', str);
} else {
localStorage.setItem('msg', str);
}
}

function load() {
var t = type.value;
if (t == 'session') {
msg.innerHTML = sessionStorage.getItem('msg');
} else {
msg.innerHTML = localStorage.getItem('msg');
}
}

</script>
</body>
</html>

在chrome閱讀器下看會有感到的。

簡略web留言板

簡略留言板
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<h1>
Web Storage 試驗</h1>
<div id="msg" >
</div>
<input type="text" id="text" />
<button onclick="save();">
留言</button>
<button onclick="_clear();">
清空</button>
<script type="text/javascript">
var msg = document.getElementById('msg'),
text = document.getElementById('text');

function save() {
var str = text.value;
var k = new Date().getTime();
localStorage.setItem(k, str);
init();
}

function init() {
msg.innerHTML = '';
var dom = '';
for (var i = 0, len = localStorage.length; i < len; i++) {
dom += '<div>' + localStorage.key(i) + ':' + localStorage.getItem(localStorage.key(i)) + '</div>'
}
msg.innerHTML = dom;
}

function _clear() {
msg.innerHTML = '';
localStorage.clear();
}

</script>
</body>
</html>

更龐雜的應用中，可以將value值用作json字符串，以此到達用作數據表的目標；

當地數據庫

在HTML5中內置了一個可經由過程sql拜訪的數據庫（新閱讀器果真壯大啊！），所以在HTML4中數據只能存在辦事器端，HTML5則轉變了這一准繩。

這類不須要存儲在辦事器的專著名詞為“SQLLite”（我終究曉得他是干甚麼的了）

應用SQLLite數據庫，須要兩個需要步調：
創立數據庫拜訪對象
應用事務處置</span></p> <div class="cnblogs_code"> <pre><span >創立對象：
openDatabase(dbName, version, dbDesc, size)</span></pre> <pre><span >現實拜訪：
db.transaction(function () {
　　tx.excuteSql('create table ......');
});</span></pre> <pre><span >數據查詢：
excuteSql(sql, [], dataHandler, errorHandler)//前面兩個為回調函數；[]估量是做sql注入處置

言而不行假把勢，我們來現實操作一番，應用數據庫完成web通信錄（冥思苦想照樣用上了jQuery）：

做的時刻竟然發明我的FF不支撐當地數據庫！！！以下是用chrome完成的簡略的通信錄：

通信錄
<!DOCTYPE html >
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style>
span{ cursor: pointer;}
</style>
<script src="../jquery-1.7.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
var search = $('#search');
var btSearch = $('#btSearch');

var phoneBook = $('#phoneBook');
var name = $('#name');
var phone = $('#phone');
var add = $('#add');

//開端法式
var db = openDatabase('phoneBook', '', 'my', 102400);

init();

add.click(function () {
save(name.val(), phone.val());
});
btSearch.click(function () {
init(search.val())
});
$('#phoneBook span').click(function () {
deleteByName($(this).attr('name'));
s = '';
});

//初始化界面
function init(name) {
db.transaction(function (tx) {
tx.executeSql('create table if not exists phoneBook(name text, phone text)', []);
var sql = 'select * from phoneBook where 1=1';
var param = [];
if (name) {
sql += ' and name=? ';
param.push(name);
}
tx.executeSql(sql, param, function (tx, rs) {
phoneBook.html('');
for (var i = 0, len = rs.rows.length; i < len; i++) {
var data = rs.rows.item(i);
showData(data);
}
});
});
}

function showData(data) {
var str = '<div>姓名：' + data.name + '；德律風：' + data.phone + ' <span onclick="del(\'' + data.name + '\')" >刪除</span></div>';
phoneBook.append($(str));
}

//刪除數據
function deleteByName(name) {
db.transaction(function (tx) {
tx.executeSql('delete from phoneBook where name=?', [name], function (tx, rs) {
init();
})
});
}
window.del = deleteByName;
//增長
function save(name, phone) {
db.transaction(function (tx) {
tx.executeSql('insert into phoneBook values(?, ?)', [name, phone], function (tx, rs) {
var d = {};
d.name = name;
d.phone = phone;
showData(d);
})
});
}

});

</script>
</head>
<body>
<h1>
當地數據庫完成web通信錄</h1>
<input type="text" id="search" placeholder="接洽人姓名" />
<button id="btSearch">
搜刮</button>

<div id="phoneBook">
</div>
<hr />
姓名：<input type="text" id="name" />
手機：<input type="text" id="phone" />
<button id="add">
添加到通信錄</button>
</body>
</html>