storage分為本地儲存(localStorage)和回話存儲(sessionStorage)漫雷,在一定程度上解決了cookie的不便利性瓜富。儲存上限為5M。儲存時降盹,以鍵值對的形式儲存与柑。API比較靈活。
下面以localStorage為例蓄坏,sessionStorage和localStorage用法一樣:
var obj = {age : 30,address:"北京"}
localStorage.setItem("user","admin");
//直接寫對象時价捧,會直接當成字符串
localStorage.setItem("desc",JSON.stringify(obj));
console.log(localStorage.getItem("user"));
console.log(JSON.parse(localStorage.getItem("desc")));
localStorage.removeItem("user");
//清空存儲內容
localStorage.clear();
console.log(localStorage);
sessionStorage 、localStorage 和 cookie 之間的區(qū)別
共同點:都是保存在瀏覽器端涡戳,且同源的结蟋。
區(qū)別:cookie數據始終在同源的http請求中攜帶(即使不需要),即cookie在瀏覽器和服務器間來回傳遞渔彰;cookie數據還有路徑(path)的概念嵌屎,可以限制cookie只屬于某個路徑下。存儲大小限制也不同恍涂,cookie數據不能超過4k宝惰,同時因為每次http請求都會攜帶cookie,所以cookie只適合保存很小的數據再沧,如會話標識尼夺。
而sessionStorage和localStorage不會自動把數據發(fā)給服務器,僅在本地保存。sessionStorage和localStorage 雖然也有存儲大小的限制淤堵,但比cookie大得多寝衫,可以達到5M或更大。
數據有效期不同粘勒,sessionStorage:僅在當前瀏覽器窗口關閉前有效竞端,自然也就不可能持久保持;localStorage:始終有效庙睡,窗口或瀏覽器關閉也一直保存,因此用作持久數據技俐;cookie默認有效期為回話期間乘陪,也可以進行設置。
作用域不同雕擂,sessionStorage不在不同的瀏覽器窗口中共享啡邑,即使是同一個頁面;localStorage 在所有同源窗口中都是共享的井赌;cookie也是在所有同源窗口中都是共享的谤逼。Web Storage 支持事件通知機制,可以將數據更新的通知發(fā)送給監(jiān)聽者仇穗。Web Storage 的 api 接口使用更方便流部。