一、本地存儲

　　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>

　　用戶名存儲案例

　　在勾選記住用戶名，當(dāng)我們再次打開瀏覽器，就在文本框里面自動顯示上次登錄的用戶名

　　案例分析：

　　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>

　　本篇關(guān)于JavaScript本地存儲實現(xiàn)用戶名存儲內(nèi)容已講述完畢。歡迎大家觀看更多精彩內(nèi)容。