關於移動端的js特效話題 註意以下 移動端的js開發，我們一般的開發做法就是使用第三方js框架或者插件去開發，有線考慮一下插件，而不是框架。不太會去寫原生的js，因為實在是太過於麻煩了 有關於本地存儲 本地存儲的話題 隨著互聯網的快速發展，基於網頁的應用越來越普遍，同時也變的越來越複雜，為了滿足各種 ...
關於移動端的js特效話題
註意以下 移動端的js開發，我們一般的開發做法就是使用第三方js框架或者插件去開發，有線考慮一下插件，而不是框架。不太會去寫原生的js，因為實在是太過於麻煩了
有關於本地存儲
本地存儲的話題
隨著互聯網的快速發展，基於網頁的應用越來越普遍，同時也變的越來越複雜，為了滿足各種各樣的需求，會經常性在本地存儲大量的數據，HTML5規範提出了相關解決方案。
本地存儲特性
1、數據存儲在用戶瀏覽器中
2、設置、讀取方便、甚至頁面刷新不丟失數據
3、容量較大，sessionStorage約5M、localStorage約20M
4、只能存儲字元串，可以將對象JSON.stringify() 編碼後存儲
window.sessionStorage
1、生命周期為關閉瀏覽器視窗
2、在同一個視窗(頁面)下數據可以共用
3、以鍵值對的形式存儲使用
存儲數據：
sessionStorage.setItem(key, value)獲取數據：
sessionStorage.getItem(key)刪除數據：
sessionStorage.removeItem(key)清空數據：(所有都清除掉)
sessionStorage.clear()window.localStorage
1、聲明周期永久生效，除非手動刪除 否則關閉頁面也會存在
2、可以多視窗（頁面）共用（同一瀏覽器可以共用）
3. 以鍵值對的形式存儲使用
存儲數據：
localStorage.setItem(key, value)獲取數據：
localStorage.getItem(key)刪除數據：
localStorage.removeItem(key)清空數據：(所有都清除掉)
localStorage.clear()案例：記住用戶名
如果勾選記住用戶名， 下次用戶打開瀏覽器，就在文本框裡面自動顯示上次登錄的用戶名
案例分析
把數據存起來，用到本地存儲
關閉頁面，也可以顯示用戶名，所以用到localStorage
打開頁面，先判斷是否有這個用戶名，如果有，就在表單裡面顯示用戶名，並且勾選覆選框
當覆選框發生改變的時候change事件
如果勾選，就存儲，否則就移除
源代碼分析
<body>
<input type="text" id="username"> <input type="checkbox" name="" id="remember"> 記住用戶名
<script>
//首先我們要先獲取元素
var username = document.querySelector('#username');
var remember = document.querySelector('#remember');
//開始執行的核心代碼塊
if (localStorage.getItem('username')) {
username.value = localStorage.getItem('username');
remember.checked = true;
}
remember.addEventListener('change', function() {
if (this.checked) {
localStorage.setItem('username', username.value)
} else {
localStorage.removeItem('username');
}
})
</script>
</body>
