【HTML5】【轉】瀏覽器本地數據(sessionStorage、localStorage、cookie)與server端數據

sessionStorage 和 localStorage 是HTML5 Web Storage API 提供的,可以方便的在web請求之間保存數據。有了本地數據,就可以避免數據在瀏覽器和服務器間不必要地來回傳遞。sessionStorage、 localStorage、cookie都是在瀏覽器端存儲的數據,其中sessionStorage的概念很特別,引入了一個“瀏覽器窗口”的概念。 sessionStorage是在同源的同窗口(或tab)中,始終存在的數據。也就是說只要這個瀏覽器窗口沒有關閉,即使刷新頁面或進入同源另一頁面, 數據仍然存在。關閉窗口后,sessionStorage即被銷毀。同時“獨立”打開的不同窗口,即使是同一頁面,sessionStorage對象也是 不同的。Web Storage帶來的好處:減少網絡流量:一旦數據保存在本地后,就可以避免再向服務器請求數據,因此減少不必要的數據請求,減 少數據在瀏覽器和服務器間不必要地來回傳遞??焖亠@示數據:性能好,從本地讀數據比通過網絡從服務器獲得數據快得多,本地數據可以即時獲得。再加上網頁本 身也可以有緩存,因此整個頁面和數據都在本地的話,可以立即顯示。臨時存儲:很多時候數據只需要在用戶瀏覽一組頁面期間使用,關閉窗口后數據就可以丟棄 了,這種情況使用sessionStorage非常方便。瀏覽器本地存儲與服務器端存儲之間的區別其實數據既可以在瀏覽器本地存儲,也可以在服務器端存儲。瀏覽器端可以保存一些數據,需要的時候直接從本地獲取,sessionStorage、localStorage和cookie都由瀏覽器存儲在本地的數據。服 務器端也可以保存所有用戶的所有數據,但需要的時候瀏覽器要向服務器請求數據。1.服務器端可以保存用戶的持久數據,如數據庫和云存儲將用戶的大量數據保 存在服務器端。2.服務器端也可以保存用戶的臨時會話數據。服務器端的session機制,如jsp的 session 對象,數據保存在服務器上。實現上,服務器和瀏覽器之間僅需傳遞session id即可,服務器根據session id找到對應用戶的session對象。會話數據僅在一段時間內有效,這個時間就是server端設置的session有效期。服務器端保存所有的用戶的數據,所以服務器端的開銷較大,而瀏覽器端保存則把不同用戶需要的數據分布保存在用戶各自的瀏覽器中。瀏覽器端一般只用來存儲小數據,而服務器可以存儲大數據或小數據。服務器存儲數據安全一些,瀏覽器只適合存儲一般數據。sessionStorage 、localStorage 和 cookie 之間的區別共 同點:都是保存在瀏覽器端,且同源的。區別:cookie數據始終在同源的http請求中攜帶(即使不需要),即cookie在瀏覽器和服務器間來回傳 遞。而sessionStorage和localStorage不會自動把數據發給服務器,僅在本地保存。cookie數據還有路徑(path)的概念, 可以限制cookie只屬于某個路徑下。存儲大小限制也不同,cookie數據不能超過4k,同時因為每次http請求都會攜帶cookie,所以 cookie只適合保存很小的數據,如會話標識。sessionStorage和localStorage 雖然也有存儲大小的限制,但比cookie大得多,可以達到5M或更大。數據有效期不同,sessionStorage:僅在當前瀏覽器窗口關閉前有效, 自然也就不可能持久保持;localStorage:始終有效,窗口或瀏覽器關閉也一直保存,因此用作持久數據;cookie只在設置的cookie過期 時間之前一直有效,即使窗口或瀏覽器關閉。作用域不同,sessionStorage不在不同的瀏覽器窗口中共享,即使是同一個頁 面;localStorage 在所有同源窗口中都是共享的;cookie也是在所有同源窗口中都是共享的。Web Storage 支持事件通知機制,可以將數據更新的通知發送給監聽者。Web Storage 的 api 接口使用更方便。

sessionStorage ****和 ****localStorage 之間的區別見上面的區別3、4
sessionStorage與頁面 js 數據對象的區別頁 面中一般的 js 對象或數據的生存期是僅在當前頁面有效,因此刷新頁面或轉到另一頁面這樣的重新加載頁面的情況,數據就不存在了。而sessionStorage 只要同源的同窗口(或tab)中,刷新頁面或進入同源的不同頁面,數據始終存在。也就是說只要這個瀏覽器窗口沒有關閉,加載新頁面或重新加載,數據仍然存 在。

cookie,容量4kb,默認各種瀏覽器都支持,缺陷就是每次請求,瀏覽器都會把本機存的cookies發送到服務器,無形中浪費帶寬。userdata,只有ie支持,單個容量64kb,每個域名最多可存10個共計640k數據。默認保存在C:\Documents and Settings\Administrator\UserData\目錄下,保存格式為xml。關于userdata更多資料參考http://msdn.microsoft.com/library/default.asp?url=/workshop/author/behaviors/reference/behaviors/userdata.asp
sessionStorage與localStorage
Web Storage實際上由兩部分組成:sessionStorage與localStorage。
sessionStorage用于本地存儲一個會話(session)中的數據,這些數據只有在同一個會話中的頁面才能訪問并且當會話結束后數據也隨之銷毀。因此sessionStorage不是一種持久化的本地存儲,僅僅是會話級別的存儲。
localStorage用于持久化的本地存儲,除非主動刪除數據,否則數據是永遠不會過期的。
為什么選擇Web Storage而不是Cookie?
與Cookie相比,Web Storage存在不少的優勢,概括為以下幾點:

  1. 存儲空間更大:IE8下每個獨立的存儲空間為10M,其他瀏覽器實現略有不同,但都比Cookie要大很多。
  2. 存儲內容不會發送到服務器:當設置了Cookie后,Cookie的內容會隨著請求一并發送的服務器,這對于本地存儲的數據是一種帶寬浪費。而Web Storage中的數據則僅僅是存在本地,不會與服務器發生任何交互。
  3. 更多豐富易用的接口:Web Storage提供了一套更為豐富的接口,使得數據操作更為簡便。
  4. 獨立的存儲空間:每個域(包括子域)有獨立的存儲空間,各個存儲空間是完全獨立的,因此不會造成數據混亂。
    兼容性如何?
    接下來的各種測試是在以下瀏覽器中進行的:IE8、Firefox3.6、Chrome5、Safari4、Opera10,事實證明各個瀏覽器在API方面的實現基本上一致,存在一定的兼容性問題,但不影響正常的使用。
最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市,隨后出現的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 228,156評論 6 531
  • 序言:濱河連續發生了三起死亡事件,死亡現場離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機,發現死者居然都...
    沈念sama閱讀 98,401評論 3 415
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事?!?“怎么了?”我有些...
    開封第一講書人閱讀 176,069評論 0 373
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經常有香客問我,道長,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 62,873評論 1 309
  • 正文 為了忘掉前任,我火速辦了婚禮,結果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當我...
    茶點故事閱讀 71,635評論 6 408
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發上,一...
    開封第一講書人閱讀 55,128評論 1 323
  • 那天,我揣著相機與錄音,去河邊找鬼。 笑死,一個胖子當著我的面吹牛,可吹牛的內容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 43,203評論 3 441
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 42,365評論 0 288
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后,有當地人在樹林里發現了一具尸體,經...
    沈念sama閱讀 48,881評論 1 334
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 40,733評論 3 354
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發現自己被綠了。 大學時的朋友給我發了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 42,935評論 1 369
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 38,475評論 5 358
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響,放射性物質發生泄漏。R本人自食惡果不足惜,卻給世界環境...
    茶點故事閱讀 44,172評論 3 347
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 34,582評論 0 26
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春,著一層夾襖步出監牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 35,821評論 1 282
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個月前我還...
    沈念sama閱讀 51,595評論 3 390
  • 正文 我出身青樓,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 47,908評論 2 372

推薦閱讀更多精彩內容