JS:存儲數據用哪個?localStorage、sessionStorage有什麼區別?

2020-12-11 IT熊孩子

進入我的主頁,查看更多JS的分享!我的代碼有多短,本篇內容就有多短!

對比cookie:

cookie會與伺服器通信;storage只存在客服端,不參與伺服器通信;同樣受同源策略影響,只有在域名一致的情況下才能查看到對應的數據;navigator.cookieEnabled檢測是否啟用了cookie,也就說cookie可以認為控制是否啟用,而storage則是自動啟用,不會被人為關閉。(比如隱私模式下)一、localStorage - 沒有時間限制的數據存儲

知識點:

存儲 key/value 對的數據;保存的數據沒有過期時間,直到手動去刪除(包括清空瀏覽器緩存);拓展了 cookie 的 4K 限制,可存儲的容量,各瀏覽器的大小不統一;只支持 string 類型的存儲(目前所有的瀏覽器中都會把localStorage的值類型限定為string類型),比如數字,存儲後變為字符串;在瀏覽器的隱私模式下面是不可讀取的;本質上是對字符串的讀取,如果存儲內容多的話會消耗內存空間,會導致頁面變卡;不能被爬蟲抓取到語法:setItem(key,value)、getItem(key)、removeItem(key)使用演示:

//定義Keyconst userk = "uk2020";const tokenk = "tk2020";const objK = "ok2020";//存儲localStorage.setItem(userk, "以氣御碼");localStorage.setItem(tokenk, "14332239527007001");localStorage.setItem(objK, { ids: 996, title: "世界還在,我在加班"});//讀取let userName = localStorage.getItem(userk);let token = localStorage.getItem(tokenk);let obj = localStorage.getItem(objK);console.log(userName, token, obj);//輸出:以氣御碼 14332239527007001 [object Object]在瀏覽器的開發者工具,Application可以查看:

存儲結構一目了然,值自動轉為字符串,因此數組、對象數據的存儲,一般需要轉換:

//轉換 JSON格式的字符串localStorage.setItem(objK, JSON.stringify({ ids: 996, title: "世界還在,我在加班" }));//獲取 let obj = localStorage.getItem(objK);console.log(JSON.parse(obj));//輸出{ ids: 996 title: "世界還在,我在加班"}也可以搭配URIComponent使用:

//轉換localStorage.setItem(objK, encodeURIComponent(JSON.stringify({ ids: 996, title: "世界還在,我在加班" })));//獲取let obj = localStorage.getItem(objK);console.log(JSON.parse(decodeURIComponent(obj)));參考文檔(菜鳥教程:https://www.runoob.com/jsref/prop-win-localstorage.html)

二、sessionStorage

知識點:

針對一個 session 的數據存儲,即臨時存儲,窗口關閉就會被清除(不是瀏覽器被關閉哦);在瀏覽器的隱私模式下面是不可讀取的;語法:setItem(key,value)、getItem(key)、removeItem(key)使用方式與localStorage是一樣的:

//Keyconst userk = "uk2020";const tokenk = "tk2020";const objK = "ok2020";//存儲sessionStorage.setItem(userk, "以氣御碼");sessionStorage.setItem(tokenk, "14332239527007001");sessionStorage.setItem(objK, encodeURIComponent(JSON.stringify({ ids: 996, title: "世界還在,我在加班"})));//獲取let userName = sessionStorage.getItem(userk);let token = sessionStorage.getItem(tokenk);let obj = sessionStorage.getItem(objK);console.log(userName, token, JSON.parse(decodeURIComponent(obj)));三、各瀏覽器的兼容性代碼

這裡就不貼代碼了,因為是文檔上有的(放在下面了),在離開之前記得點個讚咩!

參考文檔(MDN: https://developer.mozilla.org/zh-CN/docs/Web/API/Storage/LocalStorage)

相關焦點

  • 淺談cookie,sessionStorage,localStorage
    在客戶端(瀏覽器端)存儲數據有諸多益處,最主要的一點是能快速訪問(網頁)數據。httpOnly(不可以操作)Cookies 是一種在文檔內存儲字符串數據最典型的方式。一般而言,cookies 會由服務端發送給客戶端,客戶端存儲下來,然後在隨後讓請求中再發回給服務端。這可以用於諸如管理用戶會話,追蹤用戶信息等事情。此外,客戶端也用使用 cookies 存儲數據。因而,cookies 常被用於存儲一些通用的數據,如用戶的首選項設置。
  • 一篇理解cookie、session、localStorage和sessionStorage
    解決上面6個問題,首先要依此了解cookie、session、localStorage和sessionStorage的各個用法:1. Cookie是伺服器發送到用戶瀏覽器並保存在本地的一小塊數據。2. 客戶端給服務端發送http請求時,服務端會在響應頭裡面添加一個 Set-Cookie 選項,瀏覽器收到響應後通常會保存下 Cookie。3.
  • 瀏覽器緩存庫設計總結(localStorage/indexedDB)
    ,當然目前主流的雲平臺支持對象存儲,對媒體資源有不錯的優化,有條件的可以採用這種方案,比如七牛雲,阿里的對象存儲oss.localStorage 類似 sessionStorage,但其區別在於:存儲在 localStorage 的數據可以長期保留;而當頁面會話結束——也就是說,當頁面被關閉時,存儲在 sessionStorage 的數據會被清除 。
  • Apache Pulsar 引入 Cloud Storage Sink 連接器:實現數據上雲
    越來越多的企業選擇將數據存儲到雲平臺中。對於大部分軟體體系結構而言,「數據上雲」至關重要。將數據遷移上雲,有助於降低企業採購軟硬體的成本,減少監控、管理工作,提供較大存儲容量。
  • Kubernetes的Local Persistent Volumes使用小記
    最重要的區別,就是Local PV和具體節點是有關聯的,這意味著使用了Local PV的pod,重啟多次都會被Kubernetes scheduler調度到同一節點,而如果用的是HostPath Volume,每次重啟都可能被Kubernetes scheduler調度到新的節點,然後使用同樣的本地路徑;當我們要用HostPath Volume的時候
  • 快照在storage foundation中的應用介紹
    快照技術分為兩類:物理拷貝和邏輯拷貝,物理拷貝就是對原始數據的完全拷貝;邏輯拷貝就是只針對發生過改變的數據進行拷貝。兩種拷貝技術雖然都能夠將數據恢復到某一個時間點,但是其也各有有缺點:物理拷貝的優點是管理簡單,不需要監控目標數據的狀態,直接將所有數據拷貝到另外一個地方,而且可以作為數據備份直接保存起來。
  • 當容器遇見存儲:Container-Native Storage 已來!!
    那麼企業級用戶的業務系統的特性是什麼呢?業務龐雜、高耦合低內聚、平臺各異、語言各異等等,同時對網絡安全和持久化存儲有很高的要求,比如要求持久化存儲保證高可靠、高可用和高性能容器在對接企業應用時,存在的主要問題是什麼?
  • Cookie, Session, Token,WebStorage你懂多少?
    token組成裡的私密籤名,是用什麼加密的啊,順便就把公鑰私鑰給理清楚了。對稱算法,非對稱算法也給考察了。如果有人答到這裡,你還對他不放心的話,再問一句你聽過iTesting嗎?回答聽過的你就收了吧,看我公號的人技術都不會太差:)。HTTP和HTTPS的核心區別是什麼?能答出TCP請求並說出區別是SSL協議的你就收了吧。
  • kubernetes-issue-1:ephemeral-storage引發的pod驅逐問題
    ephemeral-storage(短暫存儲)的概念和作用ephemeral-storage是為了管理和調度Kubernetes中運行的應用的短暫存儲。我們使用df -h可以看到/var/lib下有很多容器相關的目錄,這些都是ephemeral-storage:2.image鏡像重新下載查證時無意中發現pod在啟動時要重新下載相關鏡像,說明由於磁碟容量不夠時,kubernetes會清理鏡像文件去騰空磁碟,
  • Session是怎麼實現的?存儲在哪裡?
    (http://www.cnblogs.com/woshimrf/p/5317776.html)為什麼有session?  首先大家知道,http協議是無狀態的,即你連續訪問某個網頁100次和訪問1次對伺服器來說是沒有區別對待的,因為它記不住你。   那麼,在一些場合,確實需要伺服器記住當前用戶怎麼辦?
  • 使用 AngularJS & NodeJS 實現基於 token 的認證應用
    傳統的認證系統在開始說基於 token 的認證系統之前,我們先看一下傳統的認證系統。用戶在登錄域輸入 用戶名 和 密碼 ,然後點擊 登錄 ;請求發送之後,通過在後端查詢資料庫驗證用戶的合法性。如果請求有效,使用在資料庫得到的信息創建一個 session,然後在響應頭信息中返回這個 session 的信息,目的是把這個 session ID 存儲到瀏覽器中;在訪問應用中受限制的後端伺服器時提供這個 session 信息;如果 session 信息有效,允許用戶訪問受限制的後端伺服器,並且把渲染好的 HTML 內容返回。
  • Storage management technology
    The incredible growth in the amount of data that must be backed up, and the requirements of the storage-management applications that were developed to manage that growth, created the demand for such speedy
  • 法律英語常用詞必記:Storage
    【中文釋義】保管,保藏,存儲【短語】Storage institution 保藏機構Storage of a protected performance 存儲受保護的表演Storage of a protected phonogram
  • Is the SOFARSOLAR AC Battery storage inverter really simple?
    The AC battery storage inverter ME3000SP from SOFARSOLAR was officially listed in 2015. with the industry leading energy storage technology, stable product quality and advanced energy storage
  • JS規範又雙叒要更新了
    階段 4: 改善用戶體驗並擴展 MVP。它們僅通過導入語法可用。如果瀏覽器支持內置模塊,則使用「std:」前綴 + 模塊名稱導入這些模塊,如下所示。此示例中加載的是 KV Storage 模塊:https://wicg.github.io/kv-storage/import {storage, StorageArea} from "std:kv-storage";KV Storage 模塊和導入映射提案與內置模塊規範密切相關。
  • IBM Spectrum Storage軟體定義存儲未來
    【IT168 評論】如今,數據中心向虛擬化和雲計算的不斷演進,應用多元化以及快速普及的移動終端和社交網絡,正在徹底改變當今IT格局。隨著數據量的爆炸性增長和數據的重要性不斷增加,以及雲平臺使用的逐步廣泛,雲平臺的規模逐步擴大,對數據快速準確存儲的要求越來越高,存儲逐漸成為了雲平臺發展的瓶頸。