學習日誌20-localstorage(瀏覽器資料儲存)1

第 11 屆 iThome 鐵人賽

DAY 20

自我挑戰組

JavaScript學習日誌系列第 20 篇

11th鐵人賽

古德瑞

2019-10-05 18:26:37

553 瀏覽

分享至

什麼是localstorage

localstorage可以將資料從頁面中的程式碼儲存到Web瀏覽器的儲存空間中，當作資料庫使用。
紀錄的資料會一直存在，除非去清空瀏覽器紀錄等動作才會消失。

在瀏覽器打開 localstorage

以google的chrome為例，右鍵點選檢查，選擇 application
左側選擇localstorage
會看到 Key 跟 Value ，之後所以操作的資料都在這邊儲存

setltem、getltem 基本操作

練習 : 先將資料寫入 localstorage，

var boy = 'gary';
localStorage.setItem("myName", boy);

localStorage.setItem是將資料寫入，寫法裡頭帶屬性跟值，屬性是"myName"，值是boy，也就是一開始宣告的boy = 'gary'，此時資料已存入localStorage。

使用localStorage.getItem撈出資料，帶入屬性就可以撈出已存的值。

console.log(localStorage.getItem('myName'));

輸入內容並呼叫操作練習

建構 html，輸入框及兩個按鈕，輸入框命名textClass，按鈕一個命名 btnClass 是用來將資料存入localStorage，另一個命名 btnCall 用來抓取localStorage資料並呼叫用。

<body>
    <h2>請輸入暱稱</h2>
    <input type="text" class="textClass">
    <input type="button" class="btnClass" value="輸入">
    <input type="button" class="btnCall" value="點擊呼叫">
</body>

JS部分，分別宣告 btn、call 來指定兩個按鈕

var btn = document.querySelector('.btnClass');
var call = document.querySelector('.btnCall');

命名 saveName 函式，把輸入框textClass輸入的文字，輸入瀏覽器資料裡

function saveName(e) {
	var str = document.querySelector('.textClass').value;
	localStorage.setItem("myName", str);
}

監聽 btnClass按鈕，並觸發saveName事件

btn.addEventListener('click',saveName);

監聽 btnCall按鈕，並觸發把瀏覽器資料抓出來，然後alert出來

call.addEventListener('click',function() {
	var str = localStorage.getItem('myName');
	alert('您好~' + str);
})

JS檔

var btn = document.querySelector('.btnClass');
var call = document.querySelector('.btnCall');

function saveName(e) {
	var str = document.querySelector('.textClass').value;
	localStorage.setItem("myName", str);
}

btn.addEventListener('click',saveName);
call.addEventListener('click',function() {
	var str = localStorage.getItem('myName');
	alert('您好~' + str);
})

練習結果

透過 JSON.parse、JSON.stringify 編譯資料

JSON.parse() > 將 sring 轉為 array
JSON.stringify() > 將 array 轉為 sring
localstorage 儲存資料是以字串化方式，所以只會保存 string 資料，
所以要透過 JSON.parse、JSON.stringify 互轉來編譯資料。

練習:

新增陣列

var country = [
    {runner:'大破茗'},{runner:'川內國輝'}
];

新增變數countryString將陣列用JSON.stringify給字串化，然後console.log()看有無正確轉化

var countryString= JSON.stringify(country);
console.log(countryString);

看到[{"runner":"大破茗"},{"runner":"川內國輝"}]，這字樣就完成字串了

將 countryString 的值用 localStorage.setItem 存入瀏覽器 , 屬性命名 'countryItem'

localStorage.setItem('countryItem',countryString);

宣告 getData 來抓取瀏覽器資料庫 'countryItem' 的值

var getData = localStorage.getItem('countryItem');

宣告 getDataAry 用 JSON.parse 把原本字串的資料轉回陣列

var getDataAry = JSON.parse(getData);

可以呼叫陣列的資料

console.log(getDataAry[1].runner);

顯示 '川內國輝' 表示成功轉回並抓取到了

學習日誌19-event(事件)5

學習日誌21-localstorage(瀏覽器資料儲存)2

系列文

JavaScript學習日誌共 30 篇

RSS系列文訂閱系列文

11 人訂閱

完整目錄

直播研討會

{{ item.channelVendor }} {{ item.webinarstarted }} |

直播中

尚未有邦友留言

立即登入留言

參賽組數

1064 組

團體組數

40 組

累計文章數

22201 篇

完賽人數

602 人

15th鐵人賽 16th鐵人賽 13th鐵人賽 14th鐵人賽 12th鐵人賽 11th鐵人賽鐵人賽 2019鐵人賽 javascript 2018鐵人賽 python 2017鐵人賽 windows php c# windows server linux css react vue.js

IT邦幫忙

JavaScript學習日誌系列 第 20 篇