欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

JavaScript中本地存儲(LocalStorage)和會話存儲(SessionStorage)的使用

 更新時間:2022年03月21日 11:50:51   作者:我想養(yǎng)只貓 ?????  
本地存儲和會話存儲是比較常用的方法,你知道兩者的區(qū)別嗎,本文詳細(xì)的介紹了JavaScript中本地存儲(LocalStorage)和會話存儲(SessionStorage)的使用,具有一定的參考價值,感興趣的可以了解一下

我不會告訴你任何定義和概念,上車,讀完這篇博客,你就會對本地存儲(Local Storage) 和 會話存儲(Session Storage)有一個清晰的認(rèn)識。

前提知識

請按照我以下的步驟來:

1、在任意網(wǎng)頁中按F12打開開發(fā)者工具

在這里插入圖片描述

2、單擊Application,即應(yīng)用

在這里插入圖片描述

3、單擊存儲,您將在那里看到本地存儲和會話存儲。

在這里插入圖片描述

本地存儲和會話存儲都存儲鍵值對。

本地存儲和會話存儲的主要區(qū)別在于,關(guān)閉瀏覽器存儲在 會話存儲 中的鍵值對會丟失。

范例

現(xiàn)在,讓我們通過一些示例來了解如何對本地存儲進(jìn)行操作。

示例1:將鍵值對提供給本地存儲

localStorage.setItem('Name1', 'uiu');

控制臺執(zhí)行,查看效果

在這里插入圖片描述

讓我們看看本地存儲的“ typeof ”:

在這里插入圖片描述

示例2: 本地存儲中設(shè)置鍵值對

在上面的示例中,我們看到了 如何在本地存儲中設(shè)置鍵值對。

現(xiàn)在,讓我們了解如何從本地存儲中獲取鍵值對。

let Name1 = localStorage.getItem('Name1')
console.log(Name1)

在這里插入圖片描述

示例3: 獲取空值

現(xiàn)在,讓我們嘗試獲取一些不存在的值。

let Name2 = localStorage.getItem('Name2');
console.log(Name2)

在這里插入圖片描述

如果您嘗試從不存在的本地存儲中獲取某些內(nèi)容,則結(jié)果為 null 。

很多時候我們希望將數(shù)組存儲在本地存儲中,因為數(shù)組很容易使用(我們有很多內(nèi)置的數(shù)組方法)。

但是,本地存儲的一個限制是它將數(shù)組存儲為字符串。讓我們看看我的意思:

// 本地存儲
localStorage.setItem('WebSite', 'uiuing.com');

// 定義ProgrammingLanguage數(shù)組
let ProgrammingLanguage = ['Java', 'Python', 'JavaScript', 'GO+']
// 本地存儲存儲 ProgrammingLanguage數(shù)組
localStorage.setItem('favoriteProgrammingLanguage', ProgrammingLanguage);

在這里插入圖片描述

為了克服這個問題??,我們使用 JSON.stringify。請看下面的實際操作

示例 4:將數(shù)組存儲在本地存儲中

現(xiàn)在我們使用 JSON.stringify 將數(shù)組存儲在本地存儲中

localStorage.setItem('WebSite', 'uiuing.com');
let ProgrammingLanguage = ['Java', 'Python', 'JavaScript', 'GO+']

// 這里講原先的ProgrammingLanguage 修改為了 JSON.stringify(ProgrammingLanguage)
localStorage.setItem('favoriteProgrammingLanguage',JSON.stringify(ProgrammingLanguage));

在這里插入圖片描述

示例 5:從本地存儲中獲取數(shù)組

從本地存儲中獲取數(shù)組。

在這里插入圖片描述

上面的結(jié)果可能看起來像一個數(shù)組,但我們從本地存儲而不是數(shù)組獲取字符串。

讓我證明一下。

在這里插入圖片描述


因此,為了從本地存儲中獲取數(shù)組,我們使用 JSON.parse ,見下文。

示例 6:從本地存儲中獲取數(shù)組?

現(xiàn)在我們 JSON.parse 使用從本地存儲中獲取數(shù)組

console.log(JSON.parse(localStorage.getItem('favoriteProgrammingLanguage')));

在這里插入圖片描述

因此,我們使用:

JSON.stringify:將數(shù)組設(shè)置為本地存儲中的值。JSON.parse:從本地存儲中獲取數(shù)組。

示例 7:清除本地存儲

清理前

在這里插入圖片描述

localStorage.clear()

運行后

在這里插入圖片描述

因此,我們可以使用 localStorage.clear() 來清除本地存儲

僅從本地存儲中刪除“name1”鍵值對。

示例 8:僅從本地存儲中刪除 Name1 鍵值對

localStorage.setItem('Name1', 'uiu');
localStorage.setItem('WebSite', 'uiuing.com');

let ProgrammingLanguage = ['Java', 'Python', 'JavaScript', 'GO+']
localStorage.setItem('favoriteProgrammingLanguage',JSON.stringify(ProgrammingLanguage));

在這里插入圖片描述

運行這條命令試試

localStorage.removeItem('Name1');

在這里插入圖片描述

正如您在上面看到的,為了刪除我們使用的特定鍵值對 localStorage.removeItem 。

會話存儲

這就是關(guān)于本地存儲的全部內(nèi)容。

我們在 會話存儲 中運行類似的操作,唯一的區(qū)別是我們 使用 sessionStorage 代替 localStorage

// 示例1
sessionStorage.setItem('Name1', 'uiu');

// 示例2
sessionStorage.getItem('Name1');

// 示例4
let ProgrammingLanguage = ['Java', 'Python', 'JavaScript', 'GO+']
sessionStorage.setItem('favoriteProgrammingLanguage',JSON.stringify(ProgrammingLanguage));

// 示例6
console.log(JSON.parse(sessionStorage.getItem('favoriteProgrammingLanguage')));

// 示例7
sessionStorage.clear()

// 示例8
sessionStorage.removeItem('Name1');

讓我們運行一下

sessionStorage.setItem('Name1', 'uiu');

在這里插入圖片描述

接下來我們關(guān)閉該網(wǎng)頁,然后重新打開

在這里插入圖片描述

此時會話存儲的數(shù)據(jù)已經(jīng)消失了,而之前示例運行的數(shù)據(jù)在本地存儲中還存在

在這里插入圖片描述

在這里插入圖片描述

總結(jié)

讓我重申一下:本地存儲和會話存儲之間唯一的主要區(qū)別是,一旦我們關(guān)閉瀏覽器,我們就會丟失會話存儲中保存的任何內(nèi)容。但是,本地存儲并非如此。

最后,讓我們看看 MDN 怎么說:

  • 窗口界面的 localStorage 只讀屬性允許您訪問 Document 來源的 Storage 對象;存儲的數(shù)據(jù)跨瀏覽器會話保存。

  • 只讀 sessionStorage 屬性訪問當(dāng)前源的會話存儲對象。sessionStorage 類似于 localStorage;不同之處在于,雖然 localStorage 中的數(shù)據(jù)不會過期,但 sessionStorage 中的數(shù)據(jù)會在頁面會話結(jié)束時被清除。

 到此這篇關(guān)于JavaScript中本地存儲(LocalStorage)和會話存儲(SessionStorage)的使用的文章就介紹到這了,更多相關(guān)JavaScript本地存儲和會話存儲內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!

相關(guān)文章

  • js操作checkbox遇到的問題解決

    js操作checkbox遇到的問題解決

    這篇文章介紹了js操作checkbox遇到的問題解決,有需要的朋友可以參考一下
    2013-06-06
  • javascript實現(xiàn)京東快遞單號的查詢效果

    javascript實現(xiàn)京東快遞單號的查詢效果

    這篇文章主要為大家詳細(xì)介紹了javascript實現(xiàn)京東快遞單號的查詢效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2020-11-11
  • JavaScript日期對象(Date)基本用法示例

    JavaScript日期對象(Date)基本用法示例

    這篇文章主要介紹了JavaScript日期對象(Date)基本用法,結(jié)合實例形式較為詳細(xì)的分析了JavaScript日期對象(Date)獲取日期、時間戳、年月日、星期及日期比對等操作技巧,需要的朋友可以參考下
    2017-01-01
  • AngularJS+Bootstrap實現(xiàn)多文件上傳與管理

    AngularJS+Bootstrap實現(xiàn)多文件上傳與管理

    這篇文章主要為大家詳細(xì)介紹了AngularJS+Bootstrap實現(xiàn)多文件上傳與管理,對上傳文件進(jìn)行加載與刪除操作,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2016-11-11
  • 理解javascript中的MVC模式

    理解javascript中的MVC模式

    這篇文章主要為大家介紹了javascript中的MVC模式,MVC是一種軟件架構(gòu)模式,一般把軟件模式分為三部分,本文就針對MVC模式的三部分進(jìn)行講解,感興趣的小伙伴們可以參考一下
    2016-01-01
  • 詳解webpack與SPA實踐之開發(fā)環(huán)境搭建

    詳解webpack與SPA實踐之開發(fā)環(huán)境搭建

    這篇文章主要介紹了詳解webpack與SPA實踐之開發(fā)環(huán)境搭建,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2017-12-12
  • 微信小程序?qū)崿F(xiàn)文件預(yù)覽

    微信小程序?qū)崿F(xiàn)文件預(yù)覽

    這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)文件預(yù)覽,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2020-10-10
  • Web前端開發(fā)之水印、圖片驗證碼

    Web前端開發(fā)之水印、圖片驗證碼

    這篇文章主要介紹了Web前端開發(fā)之水印、圖片驗證碼的相關(guān)資料,非常不錯,具有參考借鑒價值,需要的朋友可以參考下
    2016-11-11
  • JSP跨iframe如何傳遞參數(shù)實現(xiàn)代碼

    JSP跨iframe如何傳遞參數(shù)實現(xiàn)代碼

    表單與操作頁面分離,按鈕按下,click 或者onclick事件觸發(fā),傳遞一個唯一性的參數(shù)至子頁面JSP,感興趣的朋友可以了解下
    2013-09-09
  • 微信小程序生成海報分享朋友圈的實現(xiàn)方法

    微信小程序生成海報分享朋友圈的實現(xiàn)方法

    利用微信強大的社交能力通過小程序達(dá)到裂變的目的,拉取新用戶。下面小編給大家?guī)砹宋⑿判〕绦蛏珊蠓窒砼笥讶Φ膶崿F(xiàn)方法,感興趣的朋友跟隨小編一起看看吧
    2019-05-05

最新評論