JavaScript本地存儲(chǔ)實(shí)現(xiàn)用戶名存儲(chǔ)案例
一、本地存儲(chǔ)
1.1 本地存儲(chǔ)特性
1、數(shù)據(jù)存儲(chǔ)在用戶瀏覽器中
2、設(shè)置、讀取方便、甚至頁(yè)面刷新不丟失數(shù)據(jù)
3、容量大,sessionStorage約5M、localStorage約20M
4、只能存儲(chǔ)字符串,可以將對(duì)象JSON.stringify()編碼后存儲(chǔ)
1.2 window.sessionStorage
1、生命周期為關(guān)閉瀏覽器窗口
2、在用一個(gè)窗口頁(yè)面下數(shù)據(jù)可以共享
3、以鍵值對(duì)的形式存儲(chǔ)使用
設(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">存儲(chǔ)數(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)我們點(diǎn)擊了之后,就可以把表單里面的值存儲(chǔ)起來(lái) var val = ipt.value; sessionStorage.setItem('uname', val); sessionStorage.setItem('pwd', val); }); get.addEventListener('click', function() { // 當(dāng)我們點(diǎn)擊了之后,就可以把表單里面的值獲取過(guò)來(lái) console.log(sessionStorage.getItem('uname')); }); remove.addEventListener('click', function() { // sessionStorage.removeItem('uname'); }); del.addEventListener('click', function() { // 當(dāng)我們點(diǎn)擊了之后,清除所有的 sessionStorage.clear(); }); </script>
1.3 window.localStorage
1、生命周期永久生效,除非手動(dòng)刪除,否則關(guān)閉頁(yè)面也會(huì)存在
2、可以多窗口頁(yè)面共享(同一個(gè)瀏覽器)
3、以鍵值對(duì)的形式存儲(chǔ)
存儲(chǔ)數(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">存儲(chǔ)數(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>
用戶名存儲(chǔ)案例
如果勾選記住用戶名,下次用戶打開(kāi)瀏覽器,就在文本框里面自動(dòng)顯示上次登錄的用戶名
案例分析:
1、將數(shù)據(jù)存儲(chǔ)到本地存儲(chǔ)
2、關(guān)閉頁(yè)面再打開(kāi)也可以顯示用戶名,所以用到的是localStorage
3、打開(kāi)頁(yè)面需要先判斷是否有這個(gè)用戶名,如果有,就在表單里面顯示用戶名,并且勾選復(fù)選框
4、當(dāng)復(fù)選框發(fā)生改變的時(shí)候change事件
5、如果勾選,就存儲(chǔ),否則就移除
<input type="text" name="username" id="username" value="" placeholder="請(qǐng)輸入用戶名"/> <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改變時(shí) 發(fā)生 Checkbox選中和不選中時(shí) 發(fā)生 rusername.addEventListener('change',function(){ // console.log('改變了'); // console.log(rusername.checked); if(this.checked){ localStorage.setItem('username',username.value); }else{ localStorage.removeItem('username'); } }) </script>
到此這篇關(guān)于JavaScript本地存儲(chǔ)實(shí)現(xiàn)用戶名存儲(chǔ)案例的文章就介紹到這了,更多相關(guān)JavaScript本地存儲(chǔ) 內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
jquery SweetAlert插件實(shí)現(xiàn)響應(yīng)式提示框
為了滿足用戶體驗(yàn)度,使用SweetAlert插件實(shí)現(xiàn)響應(yīng)式提示框效果非常好,下面通過(guò)這篇文章給大家介紹jquery SweetAlert插件實(shí)現(xiàn)響應(yīng)式提示框,需要的朋友可以參考下2015-08-08javascript實(shí)現(xiàn)動(dòng)態(tài)側(cè)邊欄代碼
這篇文章主要介紹了javascript實(shí)現(xiàn)動(dòng)態(tài)側(cè)邊欄代碼,需要的朋友可以參考下2014-02-02

解決包含在label標(biāo)簽下的checkbox在ie8及以下版本點(diǎn)擊事件無(wú)效果兼容的問(wèn)題

javascript中方便增刪改cookie的一個(gè)類

使用ajax的post同步執(zhí)行(實(shí)現(xiàn)方法)

javascript實(shí)現(xiàn)固定側(cè)邊欄

JS+CSS實(shí)現(xiàn)的藍(lán)色table選項(xiàng)卡效果

js實(shí)現(xiàn)時(shí)間日期校驗(yàn)