JavaScript本地儲存實現使用者名稱儲存案例

2022-07-10 14:01:15

一、本地儲存

1.1 本地儲存特性

1、資料儲存在使用者瀏覽器中
2、設定、讀取方便、甚至頁面重新整理不丟失資料
3、容量大，sessionStorage約5M、localStorage約20M
4、只能儲存字串，可以將物件JSON.stringify()編碼後儲存

1.2 window.sessionStorage

1、生命週期為關閉瀏覽器視窗
2、在用一個視窗頁面下資料可以共用
3、以鍵值對的形式儲存使用

設定資料

sessionStorage.setItem(key, value)

獲取資料

sessionStorage.getItem(key)

刪除資料

sessionStorage.removeItem(key)

清空資料

sessionStorage.clear()

練習：

    <input type="text">
    <button class="set">儲存資料</button>
    <button class="get">獲取資料</button>
    <button class="remove">刪除資料</button>
    <button class="del">清空所有資料</button>
    <script>
        console.log(localStorage.getItem('username'));
 
        var ipt = document.querySelector('input');
        var set = document.querySelector('.set');
        var get = document.querySelector('.get');
        var remove = document.querySelector('.remove');
        var del = document.querySelector('.del');
        set.addEventListener('click', function() {
            // 當我們點選了之後，就可以把表單裡面的值儲存起來
            var val = ipt.value;
            sessionStorage.setItem('uname', val);
            sessionStorage.setItem('pwd', val);
        });
        get.addEventListener('click', function() {
            // 當我們點選了之後，就可以把表單裡面的值獲取過來
            console.log(sessionStorage.getItem('uname'));
        });
        remove.addEventListener('click', function() {
            // 
            sessionStorage.removeItem('uname');
        });
        del.addEventListener('click', function() {
            // 當我們點選了之後，清除所有的
            sessionStorage.clear();
        });
    </script>

1.3 window.localStorage

1、生命週期永久生效，除非手動刪除，否則關閉頁面也會存在
2、可以多視窗頁面共用（同一個瀏覽器）
3、以鍵值對的形式儲存

儲存資料

localStorage.setItem(key, value)

獲取資料

localStorage.getItem(key)

刪除資料

localStorage.removeItem(key)

清除所有資料

localStorage.clear()

練習：

    <input type="text">
    <button class="set">儲存資料</button>
    <button class="get">獲取資料</button>
    <button class="remove">刪除資料</button>
    <button class="del">清空所有資料</button>
    <script>
        var ipt = document.querySelector('input');
        var set = document.querySelector('.set');
        var get = document.querySelector('.get');
        var remove = document.querySelector('.remove');
        var del = document.querySelector('.del');
        set.addEventListener('click', function() {
            var val = ipt.value;
            localStorage.setItem('username', val);
        })
        get.addEventListener('click', function() {
            console.log(localStorage.getItem('username'));
        })
        remove.addEventListener('click', function() {
            localStorage.removeItem('username');
        })
        del.addEventListener('click', function() {
            localStorage.clear();
 
        })
    </script>

使用者名稱儲存案例

如果勾選記住使用者名稱，下次使用者開啟瀏覽器，就在文字方塊裡面自動顯示上次登入的使用者名稱

案例分析：

1、將資料儲存到本地儲存

2、關閉頁面再開啟也可以顯示使用者名稱，所以用到的是localStorage

3、開啟頁面需要先判斷是否有這個使用者名稱，如果有，就在表單裡面顯示使用者名稱，並且勾選核取方塊

4、當核取方塊發生改變的時候change事件

5、如果勾選，就儲存，否則就移除

   <input type="text" name="username" id="username" value="" placeholder="請輸入使用者名稱"/>
   <input type="checkbox" id="rusername"> 記住使用者名稱
		
   <script type="text/javascript">
        var username = document.querySelector('#username');
		var rusername = document.querySelector('#rusername');
			
		// 先判斷使用者是否需要記錄資料 再讓記錄的資料顯示再表單裡面 
		if(localStorage.getItem('username')){
			username.value=localStorage.getItem('username');
			rusername.checked = true;
		}
		// change改變時 發生  Checkbox選中和不選中時 發生
		rusername.addEventListener('change',function(){
			// console.log('改變了');
			// console.log(rusername.checked);
			if(this.checked){
				localStorage.setItem('username',username.value);
			}else{
				localStorage.removeItem('username');
			}
		})
	</script>

到此這篇關於JavaScript本地儲存實現使用者名稱儲存案例的文章就介紹到這了,更多相關JavaScript本地儲存內容請搜尋it145.com以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援it145.com！