快捷導(dǎo)航

JavaScript本地存儲實現(xiàn)用戶名存儲案例

更新時間：2022年07月10日 10:59:46 作者：鹿蹊zz

本文主要介紹了JavaScript本地存儲實現(xiàn)用戶名存儲案例，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

一、本地存儲

1.1 本地存儲特性

1、數(shù)據(jù)存儲在用戶瀏覽器中
2、設(shè)置、讀取方便、甚至頁面刷新不丟失數(shù)據(jù)
3、容量大，sessionStorage約5M、localStorage約20M
4、只能存儲字符串，可以將對象JSON.stringify()編碼后存儲

1.2 window.sessionStorage

1、生命周期為關(guān)閉瀏覽器窗口
2、在用一個窗口頁面下數(shù)據(jù)可以共享
3、以鍵值對的形式存儲使用

設(shè)置數(shù)據(jù)

sessionStorage.setItem(key, value)

獲取數(shù)據(jù)

sessionStorage.getItem(key)

刪除數(shù)據(jù)

sessionStorage.removeItem(key)

清空數(shù)據(jù)

sessionStorage.clear()

練習(xí)：

    <input type="text">
    <button class="set">存儲數(shù)據(jù)</button>
    <button class="get">獲取數(shù)據(jù)</button>
    <button class="remove">刪除數(shù)據(jù)</button>
    <button class="del">清空所有數(shù)據(jù)</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() {
            // 當(dāng)我們點擊了之后，就可以把表單里面的值存儲起來
            var val = ipt.value;
            sessionStorage.setItem('uname', val);
            sessionStorage.setItem('pwd', val);
        });
        get.addEventListener('click', function() {
            // 當(dāng)我們點擊了之后，就可以把表單里面的值獲取過來
            console.log(sessionStorage.getItem('uname'));
        });
        remove.addEventListener('click', function() {
            // 
            sessionStorage.removeItem('uname');
        });
        del.addEventListener('click', function() {
            // 當(dāng)我們點擊了之后，清除所有的
            sessionStorage.clear();
        });
    </script>

1.3 window.localStorage

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

存儲數(shù)據(jù)

localStorage.setItem(key, value)

獲取數(shù)據(jù)

localStorage.getItem(key)

刪除數(shù)據(jù)

localStorage.removeItem(key)

清除所有數(shù)據(jù)

localStorage.clear()

練習(xí)：

    <input type="text">
    <button class="set">存儲數(shù)據(jù)</button>
    <button class="get">獲取數(shù)據(jù)</button>
    <button class="remove">刪除數(shù)據(jù)</button>
    <button class="del">清空所有數(shù)據(jù)</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、將數(shù)據(jù)存儲到本地存儲

2、關(guān)閉頁面再打開也可以顯示用戶名，所以用到的是localStorage

3、打開頁面需要先判斷是否有這個用戶名，如果有，就在表單里面顯示用戶名，并且勾選復(fù)選框

4、當(dāng)復(fù)選框發(fā)生改變的時候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');
			
		// 先判斷用戶是否需要記錄數(shù)據(jù) 再讓記錄的數(shù)據(jù)顯示再表單里面 
		if(localStorage.getItem('username')){
			username.value=localStorage.getItem('username');
			rusername.checked = true;
		}
		// change改變時 發(fā)生  Checkbox選中和不選中時 發(fā)生
		rusername.addEventListener('change',function(){
			// console.log('改變了');
			// console.log(rusername.checked);
			if(this.checked){
				localStorage.setItem('username',username.value);
			}else{
				localStorage.removeItem('username');
			}
		})
	</script>