## 設置cookie ``` function setCookie(name,value) { var Days = 30; var exp = new Date(); exp.setTime(exp.getTime() + Days*24*60*60*1000); document.cookie = name + "="+ escape (value) + ";expires=" + exp.toGMTString(); } ``` ## 讀取cookie ``` function getCookie(name) { var arr,reg=new RegExp("(^| )"+name+"=([^;]*)(;|$)"); 　　 return (arr=document.cookie.match(reg))?unescape(arr[2]):null; } ``` ## 刪除cookie（將cookie設置過期即可）： ``` function delCookie(name) { var exp = new Date(); exp.setTime(exp.getTime() - 1); var cval=getCookie(name); if(cval!=null) document.cookie= name + "="+cval+";expires="+exp.toGMTString(); } ``` ***** ***** 對瀏覽器來說，使用 Web Storage 存儲鍵值對比存儲 Cookie 方式更直觀，而且容量更大 包含兩種：localStorage 和 sessionStorage sessionStorage（臨時存儲） ：為每一個數據源維持一個存儲區域，在瀏覽器打開期間存在，包括頁面重新加載； localStorage（長期存儲） ：與 sessionStorage 一樣，但是瀏覽器關閉后，數據依然會一直存在； sessionStorage 和 localStorage 的用法基本一致，引用類型的值要轉換成JSON ## 1. 保存數據到本地 ``` const info = { name: 'Lee', age: 20, id: '001' }; sessionStorage.setItem('key', JSON.stringify(info)); localStorage.setItem('key', JSON.stringify(info)); ``` 數據的保存可以封裝一個方法, 同樣的獲取和刪除我們都可以寫個公共方法，方便后續的調用與操作 ``` function set(name,value) { sessionStorage.setItem(name,value); } ``` ## 2. 從本地存儲獲取數據 getItem() 方法 ``` var data1 = JSON.parse(sessionStorage.getItem('key')); var data2 = JSON.parse(localStorage.getItem('key')); ``` ## 3. 本地存儲中刪除某個保存的數據 ``` sessionStorage.removeItem('key'); localStorage.removeItem('key'); ``` ## 4. 刪除所有保存的數據 ``` sessionStorage.clear(); localStorage.clear(); ``` ## 5. 監聽本地存儲的變化 ``` window.addEventListener('storage', function (e) { console.log('key', e.key); console.log('oldValue', e.oldValue); console.log('newValue', e.newValue); console.log('url', e.url); }) ``` ## 6、瀏覽器查看方法 a、進入開發者工具 b、選擇 Application c、在左側 Storage 下，查看 Local Storage 和 Session Storage