html5的本地儲存及案例
在學習Head First HTML5 Programming一書中，學習到了html5的web儲存，這裡簡單總結一下
1.html中的儲存形式(主流形式，userData之類的忽略):
(1) cookie
是客戶端用來儲存資料的一種選項，它既可以在客戶端設定也可以在服務端設定。
cookie會跟隨任意HTTP請求一起傳送。是以鍵值對的方式來進行儲存，主要作用是來進行http
持久化連線的
優點: 相容性好
缺點： 一是增加了網路流量；二則是它的資料容量有限，最多隻能儲存4kb的資料，
瀏覽器之間各有不同;三是不安全
(2) web儲存機制
web storage,包括兩種: sessionStorage和localStorage,前者嚴格用於一個瀏覽器會話中儲存資料，
因為資料在瀏覽器關閉後會立即刪除；後者則用於跨會話持久化的儲存資料。
對於不同的網站，資料儲存於不同的區域，並且一個網站只能訪問其自身的資料
大小: 每個域名是5M
缺點: IE不支援SessionStorage,低版本IE(IE6, IE7)不支援LocalStorage,並且不支援查詢語言
(3) indexedDB
indexed Database API，簡稱為
indexedDB，是在瀏覽器中儲存結構化資料的一種「資料庫」。它類似SQL資料庫的結構化資料儲存機制，代替了廢棄已久的
web SQL Database API，它能夠在客戶端儲存大量的結構化資料，並且使用索引高效檢索的API。
缺點：相容性不好，未得到大部分瀏覽器的支援。
2.Web Storage API(sessionStorage/LocalStorage)
大家可以參考官網的開發文件，地址如下:
https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API
儲存的內容: 只要是能序列化成字串的內容都可以儲存(陣列、圖片、json、樣式、指令碼)
簡介如下:
The Web Storage API provides mechanisms by which browsers can securely store key/value pairs, in a much more intuitive fashion than using cookies.
This article provides a walkthrough of how to make use of this simple technology.
Web儲存API提供了一種機制，通過這種機制。瀏覽器可以以一種比使用cookie更直觀的方式安全地儲存
鍵值對。
本文介紹瞭如何使用這種簡單的技術儲存資料: localStorage.setItem(key, value);
讀取資料: localStorage.getItem(key);
刪除單個數據: localStorage.removeItem(key);
刪除所有資料： localStorage.clear();
得到某個索引的key: localStorage.key(index);
以上的key和value都必須為字串，換言之，web Storage的API只能操作字串
下面直接看例子:
我們在無序列表中新增內容，然後儲存起來以便下次訪問的時候自動載入列表項
playlist.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Webville Tunes</title>
<script src="playlist_store.js"></script>
<script src="playlist.js"></script>
<link rel="stylesheet" href="playlist.css">
</head>
<body>
<form>
<!-- type為button時，value規定按鈕上的文字
placeholder屬性規定幫助使用者填寫輸入欄位的提示(hint)-->
<input type="text" id="songTextInput" size="40" placeholder="Song name">
<input type="button" id="addButton" value="Add Song">
</form>
<ul id="playlist">
</ul>
</body>
</html>
playlist.css
/* playlist.css */
body {
font-family: arial, sans-serif;
}
ul#playlist {
border: 1px solid #a9a9a9;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
margin-top: 10px;
padding: 0px;
/*list-stype-type屬性設定列表項標記的型別*/
list-style-type: none;
}
ul#playlist li {
border-bottom: 1px solid #a9a9a9;
padding: 10px;
background-image: -webkit-gradient(linear, left top, left bottom, from(#f9f9f9), to(#e3e3e3));
background-image: -moz-linear-gradient(#f9f9f9, #e3e3e3);
background-image: -ms-linear-gradient(#f9f9f9, #e3e3e3);
background-image: -o-linear-gradient(#f9f9f9, #e3e3e3);
background-image: -webkit-linear-gradient(#f9f9f9, #e3e3e3);
background-image: linear-gradient(#f9f9f9, #e3e3e3);
}
ul#playlist li:last-child {
-webkit-border-bottom-right-radius: 5px;
-webkit-border-bottom-left-radius: 5px;
-moz-border-radius-bottomright: 5px;
-moz-border-radius-bottomleft: 5px;
border-bottom: none;
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;
}
ul#playlist li:first-child {
-webkit-border-top-right-radius: 5px;
-webkit-border-top-left-radius: 5px;
-moz-border-radius-topright: 5px;
-moz-border-radius-topleft: 5px;
border-top-right-radius: 5px;
border-top-left-radius: 5px;
}
playlist.js
/*頁面完全載入時才會執行這個函式*/
window.onload = init
function init() {
var button = document.getElementById("addButton");
/*給按鈕的點選事件控制代碼賦值相應的事件處理函式*/
button.onclick = handleButtonClick;
loadPlaylist();
}
// function handleButtonClick() {
// var textInput = document.getElementById("songTextInput");
// var songName= textInput.value;
// if(songName == ""){
// alert("Please enter a song");
// } else {
// alert("Adding " + songName);
// }
// }
function handleButtonClick() {
var textInput = document.getElementById("songTextInput");
var songName = textInput.value;
var li = document.createElement("li"); //建立元素
li.innerHTML = songName;
var ul = document.getElementById("playlist"); //獲取父親元素
ul.appendChild(li); //加入子節點元素
save(songName);
}
playlist_store.js 這個js程式碼是用來實現本地儲存的LocalStorage
/*
HTML5 web儲存: 提供了兩種在客戶端儲存資料的新方法(之前是用cookie來儲存)
1.window.localStorage -- 儲存沒有截止日期的資料
2.window.sessionStorage -- 針對一個session來儲存資料
*/
function save(item){
//這裡用JSOn來序列化物件、陣列、數值、字串、布林值和null
var playlistArray = getStoreArray("playlist");
playlistArray.push(item);
localStorage.setItem("playlist", JSON.stringify(playlistArray));
}
function loadPlaylist(){
var playlistArray = getSavedSongs();
var ul = document.getElementById("playlist");
for(i = 0; i < playlistArray.length; i++){
var li = document.createElement('li');
li.innerHTML = playlistArray[i];
ul.appendChild(li);
}
}
function getSavedSongs() {
return getStoreArray("playlist");
}
function getStoreArray(key) {
var playlistArray = localStorage.getItem(key);
if(playlistArray == null || playlistArray == ""){
playlistArray = new Array();
} else {
playlistArray = JSON.parse(playlistArray);
}
return playlistArray;
}