javascript- localStorage介紹

-

看完這篇文章你會了解到localStorage是什麼?同時localStorage的一些常用用法該如何操作(如：setItem、getItem)等。文章中也有搭配案例做練習示範，可以即時確認自己是否理解。 
備註：本文章內容整理自六角學院JavaScript 入門篇 - 學徒的試煉，若內容有誤再請各位大大告知，感謝!

簡介：
localStorage會將網頁資料儲存下來，並透過網址紀錄 EX：https://www.udemy.com/
補充：localStorage、sessionStorage、cookie比較介紹 連結   
請注意，localStorage只會儲存String型態資料(如數字、布林值、字串)
我們可以透過chrome開發工具--application觀察

接著我們就直接進入主題，介紹localStorage常用方法
  • setItem、getItem操作方式
setItem用來建立新的屬性
getItem可以取出特定值
語法：
localStorage.setItem（key,value）;
key 自行創建
value 對應的值  //value 的型態只有 String!!!
var str = "tom";
localStorage.setItem("myName", str);
console.log(localStorage.getItem('myName')); //tom

  • setItem、getItem 實作練習 連結
//HTML結構
<h2>請輸入你的姓名</h2>
<input type="text" class="textClass">
<input type="button" value="點擊" class="btnClass">
<input type="button" value="點擊呼叫" class="callClass">
<ul class="list"></ul>

// 目的：撈出輸入的值 綁定DOM
var btn = document.querySelector(".btnClass");
var call = document.querySelector(".callClass");
var list = document.querySelector(".list");

function get(e) {
var str = document.querySelector(".textClass").value;
//存入localStorage
localStorage.setItem('myName',str);
list.innerHTML=str;
}
//監聽事件
btn.addEventListener("click", get, false);
call.addEventListener('click',function (){
var str=localStorage.getItem('myName');
alert('你的名字是'+str);
},false)
備註：localStorage只會保存string型別的資料
補充：不建議利用creatElement 來存儲localStorage資料
原因：creatElement是建立物件(節點)，所以儲存時候會呈現  [object HTMLLIElement] 字串

  • 使用JSON.stringify、 JSON.parse 編譯資料
說明：
1.JSON.stringify()：將資料轉為 JSON 格式的字串。
2.JSON.parse(myJSON)：將資料由 JSON 格式字串轉回原本的資料內容及型別。
// 1.將array 轉為string JSON.stringify
var country = [
{ farmer: "卡斯柏" },
{ farmer: "andy"}
];
var countryString = JSON.stringify(country);
localStorage.setItem("countryItem", countryString);

console.log(countryString);

// 2.將string 轉為array
var getData = localStorage.getItem("countryItem");
var getDataArray = JSON.parse(getData);
console.log(getDataArray[1].farmer);
延伸閱讀：
JS30-Day15-LocalStorage 介紹

  • 透過 dataset 讀取自訂資料(此範例在html結構上新增值) 練習
Html結構：
<ul class="list">
<li data-num="0" data-dog="3" class="listli">卡斯柏</li>
</ul>
data-*= "attribute"
* 字號的地方不能包含大寫字母，而屬性值則可以是任何的字串
// 撈出data值
var list = document.querySelector(".listli").dataset.dog;
console.log(list); //3

// 點擊時出現畫面
var list = document.querySelector(".listli");

function checkList(e) {
var num = e.target.dataset.num;
var dog = e.target.dataset.dog;
console.log('標籤號碼是'+num)
console.log('我有'+dog+'隻狗')
}

list.addEventListener("click", checkList, false);
補充：
HTML5中的資料屬性介紹 (data-* attribute)

  • 用array新增值，並用dataset賦予編號 運用 innerHTML練習、createElement練習
// 目的：將農夫名字印在網頁上
var country = [
{ farmer: "Andy" },
{ farmer: "Cebu" }
]

// 將ul存入變數show
var show = document.querySelector(".list");
var length = country.length;

// 所以跑一個for迴圈，並同時需要加入data-*
function updateList() {
var str = "";
for (var i = 0; i < length; i++) {
str += '<li data-num="' + i + '">' + country[i].farmer + "</li>";
}
show.innerHTML = str;
}
updateList();

// 點擊農夫時出現農夫相關資訊
function checkList(e){
var num = e.target.dataset.num;
if(e.target.nodeName !== 'LI'){return}; //if 後面不用加上分號
alert('你選擇的農夫是'+country[num].farmer)
}

// 監聽父元素
show.addEventListener("click", checkList, false);

// 刪除點擊的農夫
function checkList(e){
// console.log(e.target.nodeName);
var num = e.target.dataset.num;
if(e.target.nodeName =="LI"){
data.splice(num,1);
// 這邊更新是因為刪除後，順序需要調整
update();
}
}

參考資料：
六角學院JavaScript 入門篇 - 學徒的試煉  上課連結



留言

張貼留言