👻👻WEB中的本地存儲，你知道嗎

這是我參與更文挑戰的第3天，活動詳情查看： 更文挑戰

前言

現代web瀏覽器提供了不少在用戶電腦web客戶端存放數據的方法 它把數據長時間保存在你的電腦中, 在實際開發中不少時候會用到它，場景例如：,保留用戶對應用個性化配置。本文章將分爲 localStorage、sessionStorage這兩個部分，簡單的介紹以及咱們如何使用它

localStorage

它是在HTML5中新加入的成員，localStorage，這個成員主要是用來做爲本地存儲來使用的，它解決了cookie存儲空間的問題（每一個cookie的內容最高不能超過4K），能夠說成它是cookie的進化版，localStorage也是有空間限制的，例如谷歌瀏覽器（chrome）每一個域名的容量是5M大小。

生命週期

localStorage的生命週期是永久性的。即便關閉瀏覽器，數據也不會被清空，須要主動去銷燬。

設置本地存儲的鍵與值

若是存儲的數據是object、array，咱們須要先使用JSON.parse，把數據轉成JSON對象，再使用JSON.stringify這個方法把JSON轉換成string存放到localStorage中

localStorage.setItem('myJujin', 'https://juejin.cn/user/2858385965322935');
複製代碼

獲取本地存儲的值

const myJujin = localStorage.getItem('myJujin');
複製代碼

刪除指定鍵的本地存儲

localStorage.removeItem('myJujin');
複製代碼

刪除該站點全部的本地存儲

localStorage.clear();
複製代碼

在瀏覽器中，打開開發者工具中的application，咱們找到storage這一項並展開，咱們能夠看到當前站點所存儲的本地數據

localStorage瀏覽器兼容性

localStorage的一些優勢

• 解決了cookie的大小限制
• 能夠長期的存放數據，不會被清除
• 同個域名下數據能夠互相訪問

localStorage的一些缺點

• 每一個瀏覽器對localStorage的限制不一致
• 須要IE8以上的IE瀏覽器才支持localStorage該特性
• 存儲的值只能是string類型，不能直接存儲對象，數組。一般咱們會將數據轉換爲JSON類型存放進去
• 若是數據量過大的話，頁面會出現卡頓
• localStorage在瀏覽器的隱私模式下沒法讀取

sessionStorage

sessionStorage相似與上面說到的localStorage特性，一樣是用來存儲用戶端臨時信息的對象，區別在於localStorage是持久化保存數據，即關閉瀏覽器數據也不會被清空，而sessionStorage只是會話級別的存儲，也就是說若是當前頁面的seesionStorage存儲有數據，你把標籤頁關閉了那麼session的數據也會被銷燬掉

生命週期

sessionStorage 的生命週期是僅在當前瀏覽器標籤頁關閉前有效，不能持久保持。在標籤頁或者瀏覽器未關閉前，其數據一直都是存在的。存儲大小通常爲5M。

設置會話存儲的鍵與值

和localStorage同樣，若是存儲的數據是object、array，咱們須要先使用JSON.parse，把數據轉成JSON對象，再使用JSON.stringify這個方法把JSON轉換成string存放到sessionStorage中

sessionStorage.setItem('myJujin', 'https://juejin.cn/user/2858385965322935');
複製代碼

獲取會話存儲的值

const myJujin = sessionStorage.getItem('myJujin');
複製代碼

刪除指定鍵的會話存儲

sessionStorage.removeItem('myJujin');
複製代碼

刪除該站點全部的會話存儲

sessionStorage.clear();
複製代碼

在刷新頁面sessionStorage不會清除，可是打開同域新頁面訪問不到

它和localStorage同樣，咱們能夠經過瀏覽器的開發者工具看到當前頁面存儲的session數據

sessionStorage兼容性

sessionStorage的一些優勢

• 解決了cookie的大小限制
• 在不一樣的窗口之下的sessionStorage存儲相互獨立，互不干擾

sessionStorage的一些缺點

• 每一個瀏覽器對sessionStorage的限制不一致
• 須要IE8以上的IE瀏覽器才支持localStorage該特性
• 存儲的值只能是string類型，不能直接存儲對象，數組。一般咱們會將數據轉換爲JSON類型存放進去
• 若是數據量過大的話，頁面會出現卡頓
• sessionStorage在瀏覽器的隱私模式下沒法讀取

關於安全問題

切勿將敏感數據存放在sessionStorage和localStorage存儲中，由於它們在本地很容易被篡改，使用它們的時候，咱們還須要時刻注意是否有存在XSS注入的風險！

總結

它們都是一種數據存儲的方式，sessionStorage和localStroage基本是同樣的，而localStorage會一直保存數據，若是你的應用不須要持久保存數據，只須要當前用戶一次性使用的數據，用完這一次就能夠丟棄掉的，那麼你能夠將它存放在sessionStorage中，這樣子會比較好一些