html5——web存儲
阿新 • • 發佈：2017-12-26
sel cookie query rem get cli 移除 存儲 json
基本概念
1、傳統方式我們以document.cookie來進行存儲的，但是由於其存儲大小只有4k左右，並且解析也相當的復雜，給開發帶來諸多不便
2、h5存儲設置、讀取方便，而且容量較大，sessionStorage約5M、localStorage約20M
3、h5存儲只能存儲字符串，可以將對象JSON.stringify() 編碼後存儲
window.sessionStorage
1、在同一個窗口下數據可以共享
2、生命周期為關閉瀏覽器窗口（內存即毀滅）
window.sessionStorage.setItem("userName", "wq");//設置值 window.sessionStorage.setItem("userName", "qw");//更新值 window.sessionStorage.setItem("age", 18);//設置值 window.sessionStorage.getItem("userName");//獲取值 window.sessionStorage.removeItem("userName");//移除值 window.sessionStorage.clear();//清空所有值
window.localStorage
1、可以多窗口共享
2、永久生效，除非手動刪除（存儲在硬盤上）
window.localStorage.setItem("userName", "kk");//設置值window.localStorage.setItem("userName", "uu");//更新值 window.localStorage.getItem("userName");//獲取值 window.localStorage.removeItem("userName");//移除值 window.localStorage.clear();//清空值
其他
WebSQL、IndexDB已經被w3c 放棄了..生命周期差異，存儲空間差異
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <body> <label for=""> 用戶名： <input type="text" class="userName"/> </label> <br/><br/> <label for=""> 密 碼： <input type="password" class="pwd"/> </label> <br/><br/> <label for=""> <input type="checkbox" class="ckb"/> 記住密碼 </label> <br/><br/> <button>登錄</button> <script> var userName=document.querySelector(‘.userName‘); var pwd=document.querySelector(‘.pwd‘); var sub=document.querySelector(‘button‘); var ckb=document.querySelector(‘.ckb‘); sub.onclick=function(){ //如果記住密碼 被選中存儲，用戶信息 if(ckb.checked){ window.localStorage.setItem(‘userName‘,userName.value); window.localStorage.setItem(‘pwd‘,pwd.value); }else{ window.localStorage.removeItem(‘userName‘); window.localStorage.removeItem(‘pwd‘); } //否則清除用戶信息 } window.onload=function(){ //當頁面加載完成後，獲取用戶名，密碼，填充表單 userName.value=window.localStorage.getItem(‘userName‘); pwd.value=window.localStorage.getItem(‘pwd‘); } </script> </body> </html>
html5——web存儲