本篇文章為大家帶來了關於javascript的相關知識,其中主要介紹了JavaScript使用localStorage存儲數據,文中示例代碼介紹的非常詳細,具有一定的參考價值,希望對大家有幫助。
【相關推薦:javascript影片教學、web前端】
##背景
以前js都是Session 和#Cookie 來儲存訊息,彷彿我還停留在那個時候,一問同事有沒有新的solution,才知道現在已經有HTML5 localStorage 本機儲存這個東西,可以在瀏覽器端儲存資料。
記得最早的Cookies只能存很小的東西,4KB的樣子,而且安全性很差,在IE6時代一個網域也只能二十個Cookies吧,限制挺大,當然IE還有userData的東西,沒什麼用。 Flash也帶了一個Storage,相對比較大,空間是Cookie的25倍左右,當時現在也廢棄Flash了。
到了H5時代,就統一了,LocalStorage一統天下。官方建議是每個網站 5MB ,非常大了,雖然瀏覽器設定會有差異,但是一般就存些JSON或者字串或者快取來說,足夠了。
HTML5 LocalStorage 本機儲存
function checkStorageSupport() { // sessionStorage if (window.sessionStorage) { return true; } else { return false; } // localStorage if (window.localStorage) { return true; } else { return false; } }
Storage 動作
sessionStorage 和localStorage 儲存的數據,都以「Key-Value鍵值對」的形式存在。也就是說,每一項資料都有一個鍵名和對應的值。所有的資料都是以文字格式儲存。
//sessionStorage 操作 sessionStorage.setItem("key","value"); // setItem方法,存储变量名为key,值为value的变量 var valueSession = sessionStorage.getItem("key"); // getItem方法,读取存储变量名为key的值 sessionStorage.removeItem('key'); // removeItem方法,删除变量名为key的存储变量 sessionStorage.clear(); // clear方法,清除所有保存数据 //localStorage 操作 localStorage.setItem("key","value"); // 存储变量名为key,值为value的变量 localStorage.key = "value" // 同setItem方法,存储数据 var valueLocal = localStorage.getItem("key"); // 读取存储变量名为key的值 var valueLocal = localStorage.key; // 同getItem,读取数据 localStorage.removeItem('key'); // removeItem方法,删除变量名为key的存储变量 localStorage.clear(); // clear方法,清除所有保存的数据 // 利用length属性和key方法,遍历所有的数据 for(var i = 0; i < localStorage.length; i++) { console.log(localStorage.key(i)); } // 存储 localStorage 数据为 Json 格式 value = JSON.stringify(jsonValue); // 将 JSON 对象 jsonValue 转化成字符串 localStorage.setItem("key", value); // 用 localStorage 保存转化好的的字符串 // 读取 localStorage 中 Json 格式数据 var value = localStorage.getItem("key"); // 取回 value 变量 jsonValue = JSON.parse(value); // 把字符串转换成 JSON 对象
Storage 事件
當儲存的資料發生變化時,會觸發 storage 事件。我們可以指定這個事件的回呼函數。window.addEventListener("storage",onStorageChange);回呼函數接受一個event物件作為參數。這個event物件的key屬性,保存發生變化的鍵名。
function onStorageChange(e) { console.log(e.key); }除了key屬性,event物件的屬性還有三個:
擴充知識
1、localStorage和sessionStorage是HTML5 Web儲存的提供的兩種儲存方式,在IE7以上以及大多數瀏覽器都是支援的2、localStorage和sessionStorage的區別:(1)、localStorage和sessionStorage一樣都是用來儲存客戶端臨時資訊的物件。 (2)、他們都是只能儲存字串類型的對象(雖然規範中可以儲存其他原生類型的對象,但是目前為止沒有瀏覽器對其進行實現)。 (3)、localStorage生命週期是永久,這表示除非使用者顯示在瀏覽器提供的UI上清除localStorage訊息,否則這些資訊將永遠存在。 (記錄在記憶體中的)sessionStorage生命週期為當前視窗或標籤頁,一旦視窗或標籤頁被關閉了,那麼所有透過sessionStorage儲存的資料也就被清空了(回話性質的儲存)
(4)、不同瀏覽器無法分享localStorage或sessionStorage中的資訊。相同瀏覽器的不同頁間可以共用相同的localStorage(頁面屬於相同網域和連接埠),但是不同頁面或標籤頁間無法共享sessionStorage的資訊。
這裡需要注意的是,頁面及標籤頁僅指頂級窗口,如果一個標籤頁包含多個iframe標籤且他們屬於同源頁面,那麼他們之間是可以共享sessionStorage的。 (同源原則)
3、localStorage和sessionStorage可儲存資料的大小一般為5MB
【相關推薦:javascript影片教學、web前端】
以上是JavaScript使用localStorage儲存數據的詳細內容。更多資訊請關注PHP中文網其他相關文章!