雖然cookie , localstorge , sessionstorge三者都有存儲的功能,但是還是有區別, git上地址:https://github.com/lily1010/cookie-storge 我個人的總結如下: 一 Cookie問題 ①Cookie是什麼 Cookie 是一小段文 ...
雖然cookie , localstorge , sessionstorge三者都有存儲的功能,但是還是有區別,
git上地址:https://github.com/lily1010/cookie-storge
我個人的總結如下:
一 Cookie問題
①Cookie是什麼
Cookie 是一小段文本信息，伴隨著用戶請求和頁面在 Web 伺服器和瀏覽器之間傳遞。用戶每次訪問站點時，Web 應用程式都可以讀取 Cookie 包含的信息,簡單描述Cookie就像是訪問伺服器時伺服器頒發給用戶的“身份證”，下次訪問的時候帶回這身份證，伺服器就能識別信息。
②Cookie特點
--如果不為Cookie設置它的生存周期的話，預設是關閉瀏覽器的時候就銷毀Cookie。
--Cookie預設情況下是不允許出現中文字元的，如果我們要添加具有中文內容的Cookie時，我們需要使用java.net.URLEncoder先對中文進行編碼，隨後在進行Cookie的添加。讀取Cookie時，需要使用java.net.URLDecoder對其進行解碼。
--不同的瀏覽器對Cookie的存儲都有一些限制，通常是Cookie數量和Cookie總大小的限制。像火狐對Cookie的限制是每個功能變數名稱只能有50個Cookie值，總大小不能超過4097個字。
--Cookie在HTTP的頭部，如果Cookie的量非常大，要做Cookie做壓縮，壓縮方法是將Cookie的多個K/V看作是普通的文本，做文本壓縮。Cookie的規範中規定，Cookie僅能保存ASCII碼為34~126的可見字元。
③Cookie缺點
--每次都跟隨用戶請求發送給伺服器,浪費帶寬。
--只能存固定長度的字元
--存不了複雜的數據,比如對象
--cookie還需要指定作用域，不可以跨域調用
--cookie需要前端開發者自己封裝setCookie，getCookie方法
二 html5中 sessionstorge和localstorge問題
html5中的Web Storage包括了兩種存儲方式：sessionStorage和localStorage。為了更大容量存儲和複雜數據而設計的除此之外，它倆有setItem,getItem,removeItem,clear等方法
①sessionStorage是什麼?
sessionStorage用於本地存儲一個會話（session）中的數據，這些數據只有在同一個會話中的頁面才能訪問並且當會話結束後數據也隨之銷毀。因此sessionStorage不是一種持久化的本地存儲，僅僅是會話級別的存儲。
②localStorage是什麼?
而localStorage用於持久化的本地存儲，除非主動刪除數據，否則數據是永遠不會過期的。
③它們的數據處理方法
// 保存數據到sessionStorage
sessionStorage.setItem('key', 'value');
// 從sessionStorage獲取數據
var data = sessionStorage.getItem('key');
// 清空sessionStorage選定數據
var data = sessionStorage.removeItem("key");
// 清空sessionStorage所有數據 var data = sessionStorage.clear();
三 storage事件
先來看看storage事件的文檔說明
The storage event is fired when a storage area changes, as described in the previous two sections (for session storage, for local storage).
When this happens, the user agent must queue a task to fire an event with the name storage, which does not bubble and is not cancelable, and which uses the StorageEvent interface, at each Window object whose Document
object has a Storage object that is affected.
翻譯過來,當存儲的storage數據發生變化時都會觸發它，但是它不同於click類的事件會冒泡和能取消，同時最後這句才是重點，storage改變的時候，觸發這個事件會調用所有同域下其他視窗的storage事件，不過它本身觸發storage即當前視窗是不會觸發這個事件的
下麵來看我的文件目錄:
其中test1.html內容是:
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> </head> <body> <input type="text" placeholder="請輸入"> <button>保存數據</button> <script type="text/javascript"> // 保存數據到sessionStorage //sessionStorage.setItem('key', 'value'); // 從sessionStorage獲取數據 //var data = sessionStorage.getItem('key'); // 清空sessionStorage選定數據 //var data = sessionStorage.removeItem("key"); // 清空sessionStorage所有數據 //var data = sessionStorage.clear(); var val = document.getElementsByTagName("input")[0]; var btn = document.getElementsByTagName("button")[0]; btn.onclick = function(){ var value = val.value; if(!value) return; localStorage.setItem("key", val.value); }; if(window.addEventListener){ window.addEventListener("storage",handle_storage,false); }else if(window.attachEvent){ window.attachEvent("onstorage",handle_storage); } function handle_storage(e){ console.log(e); document.write("oldValue: "+ e.oldValue + " newValue:" + e.newValue) } </script> </body> </html>
其中test2.html內容是:
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> </head> <body> <script type="text/javascript"> if(window.addEventListener){ window.addEventListener("storage",handle_storage,false); }else if(window.attachEvent){ window.attachEvent("onstorage",handle_storage); } function handle_storage(e){ console.log(e); document.write("oldValue: "+ e.oldValue + " newValue:" + e.newValue) } </script> </body> </html>
經過測試得出結論:(ps：前提頁面test1.html和test2.html在同域下，並都是打開狀態不同視窗)
頁面test1.html下，有個input框用來存儲store，它自身綁定了storage事件，這個時候寫入新的數據點擊保存，這時新的sotre數據保存了，但是頁面test1.html的storage事件沒觸發，而頁面test2.html下，綁定的storage事件則觸發了.
問題①:既然改變的是同域下的其他頁面數據,那麼storage事件應用在那裡?
答:多視窗間多通信用到它就是最好選擇了，比如某塊公用內容區域基礎數據部分都是從store中提取的，這個區域中大多數頁面中都有，當用戶打開多個頁面時，在其中一個頁面做了數據修改，那其他頁面同步更新是不是很方便（當前頁面就要用其他方式處理了），當然用於視窗間通信它作用不僅僅如此，更多的大家可以利用它特性去發揮。
問題②:storage的events對象的常用屬性有哪些?
oldValue：更新前的值。如果該鍵為新增加，則這個屬性為null。
newValue：更新後的值。如果該鍵被刪除，則這個屬性為null。
url：原始觸發storage事件的那個網頁的網址。
key：存儲store的key名；
