六角學院｜localStorage - 瀏覽器資料儲存

localStorage 
- 瀏覽器裡面的資料庫
-應用例如在:最近瀏覽商品(的紀錄)→
  檢查,application,Storage→(localStorage ,session storage, cookie)
  (他會將紀錄紀錄在該網址內,所以你下一次登陸時依然會有瀏覽紀錄,除非你刪掉)

setItem、getItem 基本操作
範例:https://codepen.io/TANGJANE/pen/veBvww

透過 JSON.parse、JSON.stringify 來編譯資料
1.將 array 轉為 string
JSON.stringify( );
2.將 string 轉為 array
JSON.parse();
//學習以上兩點是因為 localstorage 只會保存 string 資料
範例:https://codepen.io/TANGJANE/pen/YrKdMM

data-* - 透過 dataset 讀取自訂資料
<HTML>  data-
<body>
<ul class="list">
<li data-num="0" data-dog="3" class="listli">卡斯伯</li>
</ul>
<script src="js/all103.js"></script>
</body>
<JS>var __ = e.target.dataset.___
var list = document.querySelector('.list li');

//確認農夫,以及相關資訊

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)

dataset、array 運用
範例:
第一步驟:因為使用queryselector綁定,所以只能得到一個li回應
https://codepen.io/TANGJANE/pen/XeWEQm
第二步驟:所以該如何在JS中動態的去綁定HTML標籤元素(以去綁定a、li等等)
                 但如果使用太多queryselector各別綁定會導致效能很差
第三步驟:以先鎖定大範圍的方式,找到ul、 li範圍,以方便後續針對要的部分下指令
https://codepen.io/TANGJANE/pen/Bwaxaq
第四步驟:針對鎖定的li部分下此指令if(num !=="LI"){return},以作為一個中斷點
https://codepen.io/TANGJANE/pen/GMRdZB

splice - 刪除 array 資料
https://codepen.io/TANGJANE/pen/WZNJRq




















































































































































评论

发表评论

热门博文