因關註公眾號《HTML5學堂》看到這篇文章 “利用本地存儲，記錄滾動條的位置” ，便好奇敲來試試，然後又看了一些關於WebStorage的資料 附上這篇文章的地址 https://mp.weixin.qq.com/s/z34GRUZvDU2hCbH6Kc_ZDA 與大家共勉。 在網上搜了一些記錄滾動 ...
因關註公眾號《HTML5學堂》看到這篇文章 “利用本地存儲，記錄滾動條的位置” ，便好奇敲來試試，然後又看了一些關於WebStorage的資料
附上這篇文章的地址 https://mp.weixin.qq.com/s/z34GRUZvDU2hCbH6Kc_ZDA 與大家共勉。
在網上搜了一些記錄滾動條位置的文章，大多是用cookie來記錄，下邊我就自己看到的資料與大家分析cookie與webstorage的區別。
| 優點 | 缺點 | 應用場景 | |
| Cookie | 簡單易用 | 安全性差，Cookie保存在客戶端容易被黑客竊取 | 保持登錄 |
| 瀏覽器負責發送數據 | 存儲數據容量有限，上限為4KB | 保持上次查看的頁面 | |
| 瀏覽器自動管理不同站點的Cookie | 存儲數量有限，多數瀏覽器上限為30或50個 | 瀏覽計數 | |
| 如果瀏覽器的安全配置為最高級，則Cookie失效 | 廣告追蹤 | ||
| Cookie不適合大量數據存儲，因為Cookie會由每個對伺服器的請求來傳遞，造成Cookie速度緩慢效率低下 | 購物車保持狀態 | ||
| WebStorage | 存儲空間更大，IE8下每個獨立存儲空間為10M，其他瀏覽器各有不同，但均大於Cookie | 存儲在本地的數據未加密且永遠不會過期，極易造成隱私泄露 | |
| 存儲內容不會發送到伺服器，避免寬頻浪費 | 瀏覽器會為每個域分配獨立空間，即腳本在域A中是無法訪問到B域中的存儲空間的，但是瀏覽器卻不會檢查腳本所在的域與當前域是否相同，即在域B中嵌入域A中的腳本依然可以訪問域B中數據 | ||
| 更多豐富易用的介面 | |||
| 獨立的存儲空間，每個域包括子域都有獨立的存儲空間 |
WebStorage的用法
| 方法 | 說明 |
| length | 獲取Storage對象中存儲鍵值對的數量 |
| key(index) | 獲取指定位置的鍵，索引從0開始，多用於便利Storage對象 |
| getItem(key) | 根據鍵獲取對象，如果不存在指定鍵，則返回null |
| setItem(key,value) | 存儲數據，如果值已經存在則替換舊值。如果用戶關閉網站的存儲，或者存儲打到最大容量，那麼此時設置會拋異常 |
| removeItem(key) | 刪除指定key，如不存在，則不執行任何操作 |
| clear() | 刪除所有數據，空Storage對象調用clear()也是安全的，不會執行任何操作 |
以下是js代碼
<script type="text/javascript">
var ls = window.localStorage;
// 頁面每次載入的時候獲取本地存儲裡面的值
if (ls.getItem('sTop')) {
var oldStop = ls.getItem('sTop');
// 獲取到的值來設置頁面滾動條的位置
if (document.documentElement.scrollTop) {
document.documentElement.scrollTop = oldStop;
} else {
document.body.scrollTop = oldStop;
}
} else {
console.log('抱歉，找不到滾動條的值');
}
// 監聽頁面滾動條的狀態（是否滾動）
window.addEventListener('scroll', function() {
// 滾動時獲取頁面滾動條的位置
var sTop = document.documentElement.scrollTop || document.body.scrollTop;
try{
// 滾動條的位置保存到本地存儲裡面
//ls.sTop=sTop; //或是這種方式存儲
ls.setItem("sTop",sTop) ;
}catch(e){
if(e==QUOTA_EXCEEDED_ERR){
alert("Quota exceeded!");
}
}
}, false);
</script>
