瀏覽器數據存儲方式總結

来源:https://www.cnblogs.com/Yellow-ice/archive/2019/03/10/10507472.html
-Advertisement-
Play Games

今天主要來講下前端的數據存儲，說起數據存儲，大家肯定第一時間想起cookie，localstorage，sessionstorage，而其實還有userData和IndexedDB這兩種數據存儲，接下來將對它們進行一個比較詳細的總結 一、為什麼要進行數據存儲 隨著Web應用程式的出現，慢慢的也開始產 ...


　　今天主要來講下前端的數據存儲，說起數據存儲，大家肯定第一時間想起cookie，localstorage，sessionstorage，而其實還有userData和IndexedDB這兩種數據存儲，接下來將對它們進行一個比較詳細的總結

 

一、為什麼要進行數據存儲

　　隨著Web應用程式的出現，慢慢的也開始產生了對於能夠直接在客戶端上存儲用戶信息能力的要求，我們知道當我們訪問某個頁面的時候，很多東西都需要從伺服器端進行載入，如果這個時候能將一些東西存儲在客戶端的話，是不是就可以直接拿來用啦，方便快捷，速度又快，又可以節省了很多不必要的請求，為什麼不用呢？

　　其實在我實習的時候，曾經做過一個功能，當某條廣告更新的時候右上角出現小紅點，用戶點擊過後就不出現小紅點，直到廣告更新的時候小紅點再出現，這個功能當時我就用到了客戶端數據存儲來實現啦，其實像一些登錄信息，偏好設定都可以存儲在客戶端，而首先進行客戶端存儲的方案就是cookie，而今天，cookie只是在客戶端存儲數據的其中一種方式，接下來，我們將介紹各種客戶端的數據存儲方式

 

二、cookie

1、cookie的作用　　

　　說到cookie，其實cookie有兩個主要功能，第一個功能就是用於解決http無狀態的缺點，在客戶端存儲會話信息，記錄用戶的狀態，而第二個功能也就是我們現在也經常使用cookie在客戶端存儲一些其它的數據

 

2、cookie的構成

　　一般來說，cookie是由瀏覽器保存的以下幾塊信息構成的

　　（1）名稱：一個唯一確定cookie的名稱

　　（2）值：存儲在cookie中的字元串值，值必須被URL編碼

　　（3）域：cookie對於哪個域是有效的，所有向該域發送的請求都會包含這個cookie信息

　　（4）路徑：對於指定域中的路徑，應該向伺服器發送cookie

　　（5）失效時間：表示cookie何時應該被刪除的時間戳

　　（6）安全標誌：指定後，cookie只有在使用SSL連接的時候才發送到伺服器

 

3、如何使用cookie存儲數據

　　一般來說，有兩種方式可以生成cookie，一種是伺服器發送http響應時指定Set-Cookie進行指定，另一種我們可以使用js生成cookie

　　由於cookie需要通過URL編碼，因此在寫入cookie時和讀取cookie時我們都需要進行編碼和解碼操作，為了方便，我們可以自己寫一個cookie的操作對象

var CookieUtil = {
    get: function(name) {
        var cookieName = encodeURIComponent(name) + "=",
              cookieStart = document.cookie.indexOf(cookieName),
              cookieValue = null;
         
         if(cookieStart > -1) {
             var cookieEnd = document.cookie.indexOf(";", cookieStart);
             if (cookieEnd == -1) {
               cookieEnd = document.cookie.length;
             }
             cookieValue = decodeURIComponent(document.cookie.substring(cookieStart + cookieName.length, cookieEnd));
         }
         return cookieValue;
    },
    set: function(name, value, expires, path, domain, secure) {
        var cookieText = encodeURIComponent(name) + "=" + encodeURIComponent(valeu);
        if(expires instanceof Data) {
            cookieText += ";expires=" + expires.toGMTString();
        }
        if(path) {
            cookieText += ";path=" + path;
        }
        if(domain) {
            cookieText += ";domain=" + domain;
        }
        if(secure) {
            cookieText += ";secure";
        }
        document.cookie = cookieText;
    }
    unset: function(name, path, domain, secure) {
        this.set(name, "", new Date(0), path, domain, secure);
    }
}

　　當我們想在cookie存儲一些數據，比如存儲用戶是否點擊廣告的狀態，可以像下麵這樣設置

CookieUtil.set("ifClick", "true");

　　當我們想判斷用戶是否點擊了廣告時，就需要從cookie拿出數據，可以像下麵這樣獲取數據

CookieUtil.get("ifClick");

　　通過從cookie中獲取出我們存入的ifClick數據，我們可以得到相應的值為true，好啦，這個廣告用戶已經點擊了，不用顯示小紅點啦

 

4、cookie的缺點

　　雖然cookie可以存儲一些數據，但是仍然存儲下麵一些缺點

　　（1）cookie需要在客戶端和伺服器端之間來回傳送，會浪費不必要的資源

　　（2）cookie的存儲大小有限制，對於每個域，一般只能設置20個cookie，每個cookie大小不能超過4KB

　　（3）cookie的安全性，cookie因為保存在客戶端中，其中包含的任何數據都可以被他人訪問，cookie安全性比較低

 

三、IE用戶數據

　　雖然H5中可以通過localstorage和sessionstorage進行數據存儲，但是低版本的ie不支持呀，這可怎麼辦？為了在ie中存儲數據，微軟通過一個自定義行為引入了持久化用戶數據的概念

1、什麼是userData

　　userData是ie的一種數據存儲方式，userData 存儲通過將數據寫入一個UserData存儲區（UserData store）來保存數據，userData將數據以XML格式保存在客戶端上，UserData存儲方式只適用於IE瀏覽器，UserData存儲區保存以後，即使IE瀏覽器關閉或者刷新了，下一次進入該頁面，數據也能夠重新載入而不會丟失，也就是數據將一直存在，除 非你人為刪除或者用腳本設置了該數據的失效期

　　一般來說，userData允許每個文檔最多保存128KB數據，每個功能變數名稱最多1MB數據，是不是會比cookie存儲的數據要大呢？

 

2、如何使用userData存儲數據

　　如果我們想使用userData存儲數據，首先必須使用css在某個元素上指定userData行為

<div style="behavior:url(#default#userData)" id="dataStore></div>

　　一旦該元素使用了userData行為，那麼就可以使用setAttribute()方法在上面保存數據了，為了將數據提交到瀏覽器緩存中，還必須調用save()方法並告訴它要保存到的數據空間的名字，數據空間名字可以完全任意，僅用於區分不同的數據集

var dataStore = document.getElementById("dataStore");
dataStore.setAttribute("ifClick", "true");
dataStore.save("ClickInfo");

　　在上面的代碼中，在使用setAttribute存儲了數據之後，調用了save方法，指定了數據空間的名稱ClickInfo，下一次頁面載入後，可以使用load方法指定同樣的數據空間來獲取數據

dataStore.load("ClickInfo");
dataStore.getAttribute("ifClick");

　　在上面的代碼中，對load()的調用獲取了ClickInfo數據空間里的所有信息，並且使數據可以通過元素訪問，只有到載入確切完成之後數據才可以使用，好啦，現在我們又成功獲取到了ifClick的值啦，ifClick的值為true，好啦，廣告已經點擊，不顯示小紅點

　　如果getAttribute()調用了不存在的名稱或者是尚未載入的名稱，則返回null，我們也可以使用removeAttribute()方法來刪除某個數據

dataStore.removeAttribute("ifClick")；

 

3、userData的缺點

　　（1）userData只是針對ie的數據存儲

　　（2）userData的訪問限制和對cookie的訪問限制一樣，必須來自同一個功能變數名稱，在同一個路徑下，並使用與進行存儲腳本同樣的協議才能訪問

　　（3）userData的數據也是不安全的，不能存放重要的信息

 

四、Web存儲機制

　　接下來，我們要說一下html5中的存儲啦，主要是sessionStorage和localStrorage

1、什麼是Web存儲

　　Web Storage也是一種在客戶端存儲數據的一種機制，主要的目的是為了剋服由cookie帶來的一些限制，當數據需要被嚴格控制在客戶端上時，無須將數據在客戶端和伺服器之間來回的進行傳送，並且可以存儲大量的跨會話的數據

　　一般來說，Web Storage包含了兩種對象的定義，sessionStorage和globalStorage，而現在localStorage在修訂過的html5規範中作為持久保存客戶端數據的方案取代了globalStorage，接下來，讓我們看一下它們有什麼區別啦

 

2、sessionStorage

（1）什麼是sessionStorage

　　sessionStorage對象是存儲特定於某個會話的數據，也就是數據只保存到瀏覽器關閉，這個對象就像會話cookie，也會在瀏覽器關閉後消失，存儲在sessionStorage中的數據可以跨越頁面刷新而存在

（2）如何使用sessionStorage存儲數據

　　由於sessionStorage對象是Storage的一個實例，所以存儲數據時可以使用setItem()或者直接設置新的屬性來存儲數據

//  使用方法存儲數據
sessionStorage.setItem("ifClick", "true");

//  使用屬性存儲數據
sessionStorage.ifClick = "true";

　　當我們要獲取某個數據的時候，可以使用getItem來獲取數據

sessionStorage.getItem("ifClick");

　　我們現在又成功獲取到ifClick的值啦，當然也可以通過length屬性和key()方法來獲取sessionStorage的值

（3）sessionStorage的特點

　　a、同源策略限制，若想在不同頁面之間對同一個sessionStorage進行操作，這些頁面必須在同一協議、同一主機名和同一埠下

　　b、單標簽頁限制，sessionStorage操作限制在單個標簽頁中，在此標簽頁進行同源頁面訪問都可以共用sessionStorage數據

　　c、只在本地存儲，seesionStorage的數據不會跟隨HTTP請求一起發送到伺服器，只會在本地生效，併在關閉標簽頁後清除數據

　　d、存儲方式，seesionStorage的存儲方式採用key、value的方式

　　e、存儲上限限制：不同的瀏覽器存儲的上限也不一樣，但大多數瀏覽器把上限限制在5MB以下

 

3、globalStorage

（1）什麼是globalStorage

　　作為最初的Web Storage的一部分，這個對象的目的是跨越會話存儲數據，但有特定的訪問限制，現在globalStorage已經被localStorage取代

（2）如何使用globalStorage存儲數據

　　要使用globalStorage，首先要指定哪些域可以訪問該數據，可以通過方括弧標記使用屬性來實現

globalStorage["aaa.com"].ifClick = "true";

　　在上面的代碼中，訪問的是針對功能變數名稱aaa.com的存儲空間，這個存儲空間對於aaa.com及其所有子域都是可以訪問的，我們可以像下麵這樣來獲取數據

globalStorage[aaa.com].getItem("ifClick");

　　因為globalStorage現在已經比較少使用，如果大家想使用，還是使用localStorage

（3）globalStorage的特點

　　如果不使用removeItem()或者delete刪除，或者用戶未清除瀏覽器緩存，數據將會一直保存在磁碟上，因此很適合在客戶端存儲文檔或者長期保存用戶偏好設置

 

4、localStorage

（1）什麼是localStorage

　　localStorage對象在修訂過的html5規範中作為持久保存客戶端數據的方案卻帶了globalStorage，與globalStorage不同，不能給localStorage指定任何訪問規則，因為規則已經事先訂好了，要訪問同一個localStorage對象，頁面必須來自同一個功能變數名稱，使用同一種協議，在同一個埠

（2）如何使用localStorage存儲數據

　　由於localStorage是Storage的實例，可以像使用sessionStorage一樣來使用它

localStorage.setItem("ifClick","true");

　　當我們要獲取數據的時候，可以像下麵這樣獲取

localStorage.getItem("ifClick");

　　存儲在localStorage中的數據和存儲在globalStorage中的數據一樣，都遵循相同的規則，數據保留到通過js刪除或者是用戶清除瀏覽器緩存

（3）localStorage的特點

　　a、localStorage會可以將第一次請求的數據直接存儲到本地，這個相當於一個5M大小的針對於前端頁面的資料庫，相比於cookie可以節約帶寬，但是這個卻是只有在高版本的瀏覽器中才支持的

　　b、目前所有的瀏覽器中都會把localStorage的值類型限定為string類型，這個在對我們日常比較常見的JSON對象類型需要一些轉換

　　c、localStorage本質上是對字元串的讀取，如果存儲內容多的話會消耗記憶體空間，會導致頁面變卡

　　最後，要和大家說的是，sessionStorage和localStorage都剋服了cookie的一些限制，它們都有很多共同的特點，localStorage與sessionStorage的唯一一點區別就是localStorage屬於永久性存儲，而sessionStorage屬於當會話結束的時候，sessionStorage中的鍵值對會被清空

 

五、IndexedDB

1、為什麼會有IndexedDB

　　現有的瀏覽器數據儲存方案，都不適合儲存大量數據：Cookie 的大小不超過4KB，且每次請求都會發送回伺服器；LocalStorage 在 2.5MB 到 10MB 之間（各家瀏覽器不同），而且不提供搜索功能，不能建立自定義的索引，所以，需要一種新的解決方案，這就是 IndexedDB 誕生的背景

 

2、什麼是IndexedDB

　　通俗地說，IndexedDB 就是瀏覽器提供的本地資料庫，它可以被網頁腳本創建和操作，IndexedDB 允許儲存大量數據，提供查找介面，還能建立索引，這些都是 LocalStorage 所不具備的，就資料庫類型而言，IndexedDB 不屬於關係型資料庫（不支持 SQL 查詢語句），更接近 NoSQL 資料庫

 

3、IndexedDB的特點

　　a、鍵值對儲存： IndexedDB 內部採用對象倉庫（object store）存放數據，所有類型的數據都可以直接存入，包括 JavaScript 對象，對象倉庫中，數據以"鍵值對"的形式保存，每一個數據記錄都有對應的主鍵，主鍵是獨一無二的，不能有重覆，否則會拋出一個錯誤

　　b、非同步： IndexedDB 操作時不會鎖死瀏覽器，用戶依然可以進行其他操作，這與 LocalStorage 形成對比，後者的操作是同步的，非同步設計是為了防止大量數據的讀寫，拖慢網頁的表現

　　c、支持事務： IndexedDB 支持事務（transaction），這意味著一系列操作步驟之中，只要有一步失敗，整個事務就都取消，資料庫回滾到事務發生之前的狀態，不存在只改寫一部分數據的情況

　　d、同源限制：IndexedDB 受到同源限制，每一個資料庫對應創建它的功能變數名稱，網頁只能訪問自身功能變數名稱下的資料庫，而不能訪問跨域的資料庫

　　e、儲存空間大： IndexedDB 的儲存空間比 LocalStorage 大得多，一般來說不少於 250MB，甚至沒有上限

　　f、支持二進位儲存：IndexedDB 不僅可以儲存字元串，還可以儲存二進位數據（ArrayBuffer 對象和 Blob 對象）

　　對於IndexedDB的操作會比較複雜，如果大家有興趣可以在網上再自己看一些資料

 

　　好啦，今天就介紹到這裡啦，這是目前比較常用的幾種存儲方式，希望大家一起學習呀

 


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • Flutter 即學即用系列博客——07 RenderFlex overflowed 引發的思考
    背景 在進行 Flutter UI 開發的時候，控制台報出了下麵錯誤： flutter: ══╡ EXCEPTION CAUGHT BY RENDERING LIBRARY ╞═════════════════════════════════════════════════════════ flut ...
  • iOS 好文源碼收藏
    iOS 好文源碼收藏 Swift 優雅的適配大小 http://www.cocoachina.com/ios/20181025/25289.html iOS：一分鐘集成主流APP個人資料頁 http://www.cocoachina.com/ios/20181219/23578.html 30個讓你 ...
  • Wonder 1.0正式版發佈-----WebGL 3D引擎和編輯器
    我們很榮幸地向大家發佈Wonder 1.0正式版-----WebGL 3D引擎和編輯器！ ...
  • 2018-11-23 手工翻譯Vue.js源碼:嘗試重命名標識符與文本
    續前文: "手工翻譯Vue.js源碼第一步:14個文件重命名" 對core/instance/索引中的變數, 方法進行重命名如下(題圖): javascript import { 混入初始化 } from './初始化' import { 混入狀態 } from './狀態' import { 混入 ...
  • 快樂前端-圖片預載入
    前言 正所謂金三銀四五吃土，因此這些天幾個前端技術群討論最多的話題就是面試題了。某日群內討論一道面試題：“前端如何實現大量圖片預載入以及預載入進度動畫進度條顯示？” 恰巧本人以前jquery、zepto一把梭快樂切圖的時候，寫過不少形式的圖片預載入動畫。對於圖片預載入的原理稍微瞭解接觸過那麼一點點， ...
  • 2018-11-09 VS Code英漢詞典插件v0.0.4-駝峰下劃線命名
    首先, 在兩天時間內安裝數破百, 多謝支持. VS Code插件市場地址: "英漢詞典 Visual Studio Marketplace" 開源庫地址同前文: "Visual Studio Code插件 英漢詞典初版發佈" 查詢單詞功能基本不變, 在詳細信息的開頭添加了原詞: 如題圖, 支持駝峰命 ...
  • es6基礎知識
    1.超引用:(...) 用於取出參數對象中的所有可遍歷屬性，拷貝到當前對象之中 2.解構賦值: 賦值: 解構: 3. for of迴圈: es5的for迴圈: for in 迴圈: for of 迴圈:(不能用來遍歷json) 4.Map對象 map對象是因為for of 的出現才出現的,一個map ...
  • webpack初起步
    webpack 用於編譯 JavaScript 模塊。一旦完成安裝，就可以通過 webpack 的 CLI 或 API 與其配合交互。 首先創建一個目錄，進入目錄中，初始化npm 然後本地安裝webpack，webpack-cli ，lodash 目錄結構： index.html webpack.c ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類