iT邦幫忙

DAY 21
5

MIS2000Lab.的「HTML5 認證考試,從零開始」--菜鳥的30天馬拉松系列 第 21

MIS2000Lab.的「HTML5 認證考試,從零開始」#21-- Local Storage(永久存放區)

上一篇文章:MIS2000Lab.的「HTML5 從零開始」#20--Session storage
http://ithelp.ithome.com.tw/question/10160001

前面介紹的Session storage是「暫存性的資料」,
而Local storage則沒有期限的限制、或是瀏覽器被關閉以後仍會存在(存放在Client端的檔案系統內)。

當然,可以在瀏覽器裡面設定是否要移除這些資訊,或是關閉瀏覽器的同時就立即清除這些資訊。

”不同網站”產生的Local storage是”無法”共用的!

您可以透過以下的JavaScript測試一下您正在使用的瀏覽器是否支援local storage功能:

if( window.localStorage ){
...
}

註解:為了方便使用,Local storage可以直接在程式裡面呼叫,不需要在前面加上window物件,例如:window.localStorage。

//註解:myKey就是自己定義的key值。

方法一:
localStorage.setItem("myKey","即將儲存的資訊文字");
var textData = localStorage.getItem("myKey");

方法二:
localStorage["myKey"] = "即將儲存的資訊文字";
var textData = localStorage["myKey"];

方法三:
localStorage.myKey = "即將儲存的資訊文字";
var textData = localStorage.myKey;

跟上一篇文章的範例完全相同,MIS2000Lab.的「HTML5 從零開始」#20--Session storage
只是把Session Storage改成 Local Storage

您就可以看見「執行成果」的變化...從範例裡面學習、直接看成果,一目了然!

[img=415,414]http://ithelp.ithome.com.tw/upload/images/20141016/20141016103301543f2e5ded42d\_resize\_600.jpg[/img]

==== 屬性與方法 ====

Session storage與Local storage都支援下列屬性和方法。

.clear()方法 從 Web存放區移除所有key值組。
constructor 將參照傳回物件建構函式。
.getItem()方法 擷取(讀取)與 Web存放區裡面索引鍵關聯的目前值。
key()方法 抓取集合中指定索引的索引鍵。
length 抓取key值清單的長度。
remainingSpace 抓取儲存物件的剩餘記憶體空間(單位:位元組)。
.removeItem()方法 從 Web存放區集合刪除key值組。
.setItem()方法 設定(寫入)key值組。

==== 處理Storage事件 ====

storage API有session與local storage兩者。

您可以透過這個事件提示網頁,在儲存區裡面的資料已經被異動了。當資料被修改時就會觸發這個事件。程式碼的範例如下:

function myStorageCallback( e ) {
  alert("原本的Key值:" + e.key + ",內容已經改成:" + e.newValue);
}

window.addEventListener("storage", myStorageCallback, true);

從事件物件傳給事件處理器,共有屬性如下:
 key:
 oldValue:改變以前的(舊)數值。
 newValue:將要改變的(新)數值。
 url:script程式碼。
 storageArea:storage將使用session或是local。

不要走開,馬上回來

下一篇文章:Indexed Database API
**http://ithelp.ithome.com.tw/question/10160292**

===============================================
本系列文章已經集結出書
HTML5、CSS、JavaScript 網頁程式設計與 MCSD 70-480 認證教材

MIS2000 Lab. 周棟祥/吳進魯

出版商:碁峰
出版日期:2015-04-09

語言:繁體中文
ISBN:9863475750
ISBN-13:9789863475750

PChome http://24h.pchome.com.tw/books/prod/DJAV0S-A90060ASI
博客來 http://www.books.com.tw/products/0010671214
天瓏書局 https://www.tenlong.com.tw/items/9863475750?item\_id=1003110


上一篇
MIS2000Lab.的「HTML5 認證考試,從零開始」#20--Session storage
下一篇
MIS2000Lab.的「HTML5 認證考試,從零開始」#22-- 使用 Indexed Database API
系列文
MIS2000Lab.的「HTML5 認證考試,從零開始」--菜鳥的30天馬拉松30

尚未有邦友留言

立即登入留言