sessionStorage和localStorage

wujl596 發布于2019-08-23 14:38 / 2392人閱讀

摘要：前端存儲和簡述曾在項目中多次使用過和來存放，但一直未深入了解。以為例他們均只能存儲字符串類型的對象存儲大小都為都遵守同源策略不同點有期限，當窗口或瀏覽器關閉時就會被銷毀。本文如有錯誤，歡迎指出。

H5前端存儲 localStorage 和 sessionStorage 簡述

曾在項目中多次使用過localStorage和sessionStorage來存放token，但一直未深入了解。近期項目壓力極小，就看了很多文章研究了一下，并結合項目經驗做個總結。

session 和 sessionStorage，Java 和 JavaScript

在徹底弄懂session,cookie,token中，我已經講過session。在我學習sessionStorage的過程中，看到很多文章的評論說：sessionStorage不是存在服務器的嗎？在這里，我說明一下，session是存放于服務器的一個狀態集合，而sessionStorage是H5新引入的一個客戶端存儲數據的空間，與session并無關系，大家千萬不要搞混了。就像Java和JavaScript，只是名字長得像而已。localStorage和sessionStorage之間有些異同，可以進行比較

用法

用法很簡單，sessionStorage和localStorage的api一樣。

// 保存數據到sessionStorage
sessionStorage.setItem("key", "value");

// 從sessionStorage獲取數據
const data = sessionStorage.getItem("key");

// 從sessionStorage刪除保存的數據
sessionStorage.removeItem("key");

// 從sessionStorage刪除所有保存的數據
sessionStorage.clear();

// 從sessionStorage獲取全部數據
const allData=sessionStorage.valueOf();

異同 相同點

localStorage和sessionStorage一樣都是用來存儲客戶端臨時信息的對象。以chrome為例

他們均只能存儲字符串類型的對象

存儲大小都為5M

都遵守同源策略

不同點

sessionStorage有期限，當窗口或瀏覽器關閉時就會被銷毀。localStorage無限期，關閉瀏覽器后仍存在，除非用戶手動在瀏覽器UI層刪除

localStorage 在同源的不同窗口下可共享，在不同瀏覽器中不可共享

sessionStorage 在同源的不同窗口下不可共享。注意這里的不同窗口是指瀏覽器另起一窗口，并不是指頁面路由跳轉

小結

在我做過的項目中，storage一般用來存儲少量的用戶信息和token，建議大家不要把什么數據都放在 localStorage 和 sessionStorage中，畢竟前端的安全性太低。只要打開控制臺就可以任意的修改localStorage 和 sessionStorage的數據。重要的信息最好還是放在后臺。

謝謝

最后如果大家有疑惑可以隨便找一個小說網站在控制臺試一試，很快便可掌握。
本文如有錯誤，歡迎指出。

GPU云服務器云服務器 Sessionstorage localstorage localstorage存儲存儲localstorage

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/100915.html

印象最深的一個bug：sessionStorage緩存在移動端失效

摘要：移動端緩存失效是我印象最深的一個之一，為啥呢，因為這個問題導致我加班到很晚。的生命周期是僅在當前會話下有效。引入了一個瀏覽器窗口的概念，是在同源的窗口中始終存在的數據。無bug，不程序：作為程序員的我，不是修bug就是在寫bug的路上。　　移動端sessionStorage緩存失效是我印象最深的一個bug之一，為啥呢，因為這個問題導致我加班到很晚。在現在看來就是一個簡單的概念問題。在我剛工作...

yuxue 2021-11-18 10:07 評論0 收藏0
sessionStorge和localStorage的使用-踩坑記_09

摘要：的使用屬性允許你訪問一個對象。它與相似，不同之處在于里面存儲的數據沒有過期時間設置，而存儲在里面的數據在頁面會話結束時會被清除。頁面會話在瀏覽器打開期間一直保持，并且重新加載或恢復頁面仍會保持原來的頁面會話。 sessionStorge的使用 sessionStorage 屬性允許你訪問一個 session Storage 對象。它與 localStorage 相似，不同之處在于 lo...

Jochen 2019-08-23 13:41 評論0 收藏0
sessionStorge和localStorage的使用-踩坑記_09

摘要：的使用屬性允許你訪問一個對象。它與相似，不同之處在于里面存儲的數據沒有過期時間設置，而存儲在里面的數據在頁面會話結束時會被清除。頁面會話在瀏覽器打開期間一直保持，并且重新加載或恢復頁面仍會保持原來的頁面會話。 sessionStorge的使用 sessionStorage 屬性允許你訪問一個 session Storage 對象。它與 localStorage 相似，不同之處在于 lo...

PrototypeZ 2019-08-02 12:06 評論0 收藏0
客戶端數據存儲 --- web storage From 《高程3》

摘要：的目的就是取代進行大量的本地數據存儲，其中不能進行跨會話存儲，這可以使用彌補。刪除由指定的名值對兒。使用方法存儲數據使用屬性存儲數據使用方法讀取數據使用屬性讀取數據一般來說，對存儲空間大小的限制都是以每個源協議域和端口為單位的。前言本文首先介紹web storage和Cookie的對比，解釋web storage的優勢；隨后指出怎樣使用插firebug插件的擴展firestorag...

wangbinke 2019-08-21 14:37 評論0 收藏0