Cookie、sessionStorage、localStorage的區(qū)別

（1）問題分析

面試官主要是針對瀏覽器緩存方面的知識面進行考核，其中主要考點是HTML 5 本地存儲的應用的考察，旨在敲定求職者是否具備真實的開發(fā)工作經驗。

（2）核心問題講解

共同點
都是保存在瀏覽器端！

區(qū)別
1）cookie數據始終在同源的http請求中攜帶（即使不需要），即cookie在瀏覽器和服務器間來回傳遞；存儲大小限制也不同，cookie數據不能超過4k，同時因為每次http請求都會攜帶cookie，所以cookie只適合保存很小的數據，如會話標識。
而sessionStorage和localStorage不會自動把數據發(fā)給服務器，僅在本地保存。sessionStorage和localStorage 雖然也有存儲大小的限制，但比cookie大得多，可以達到5M或更大。
2） 數據有效期不同，sessionStorage：僅在當前瀏覽器窗口關閉前有效，自然也就不可能持久保持；localStorage：始終有效，窗口或瀏覽器關閉也一直保存，因此用作持久數據；cookie只在設置的cookie過期時間之前一直有效，即使窗口或瀏覽器關閉。
3）作用域不同，sessionStorage不在不同的瀏覽器窗口中共享，即使是同一個頁面；localStorage 在所有同源窗口中都是共享的；cookie也是在所有同源窗口中都是共享的。

（3） 問題擴展

1）session和cookie有什么區(qū)別 ？
建議答案 ： session是存儲服務器端，cookie是存儲在客戶端，所以session的安全性比cookie高。獲取session里的信息是通過存放在會話cookie里的session id獲取的。而session是存放在服務器的內存中里，所以session里的數據不斷增加會造成服務器的負擔，所以會把很重要的信息存儲在session中，而把一些次要東西存儲在客戶端的cookie里。
session的信息是通過sessionid獲取的，而sessionid是存放在會話cookie當中的，當瀏覽器關閉的時候會話cookie消失，所以sessionid也就消失了，但是session的信息還存在服務器端
2）怎么給localStorage設置值，和獲取值 ？
設置值：localStorage.setItem(鍵，值)
獲取值：localStorage.getItem(鍵)

（4）結合項目中使用

這個用的比較多的是在注冊登陸這個功能的時候

猜你喜歡：

HTML5新增form屬性有哪些功能?具體應該怎樣操作？

HTML5的瀏覽器支持概況【web前端培訓】

黑馬程序員Html5+Css3由淺入深視頻教程下載    

黑馬程序員前端高級軟件工程師培訓