關于移動端的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 = https://www.cnblogs.com/BM-laoli/p/localStorage.getItem('username');
remember.checked = true;
}
remember.addEventListener('change', function() {
if (this.checked) {
localStorage.setItem('username', username.value)
} else {
localStorage.removeItem('username');
}
})
</script>
</body>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/141696.html
標籤：JavaScript