前端存儲 (2) - sessionStorage ,localStorage

ARGUS 發布于2019-08-22 18:45 / 1968人閱讀

摘要：存儲目錄定義生命周期語法存儲大小注意點定義瀏覽器提供的，可以在當前域名下存儲信息，只能存儲生命周期是關閉當前頁就清楚了，一直都在，關閉瀏覽器也會存在語法存儲王五獲取清除存儲大小左右測試當前瀏覽器存儲大小注意點存儲的時候要是，不要用數組或者

sessionStorage ,localStorage 存儲 目錄

定義

生命周期

語法

存儲大小

注意點

定義

sessionStorage ,localStorage 瀏覽器提供的api，
可以在當前域名下存儲信息，只能存儲 string

生命周期

sessionStorage 是關閉當前 tab頁就清楚了，localStorage 一直都在，關閉瀏覽器也會存在

語法

存儲

sessionStorage.setItem(key,value);

 sessionStorage.setItem("userName","王五");

獲取

var result = sessionStorage.getItem(key);

清除
sessionStorage.clear();

存儲大小 5Mb 左右

測試當前瀏覽器存儲大小 http://dev-test.nemikor.com/w...

注意點

存儲的時候 value 要是 string ，不要用數組或者對象

數組
// 錯誤處理方式
sessionStorage.setItem("a",[1,2,3,4,5])
sessionStorage.getItem("a")   // "1,2,3,4,5"  這樣處理的話，返回成了一個 string，得自己在轉換成 數組

// 正確處理方式
sessionStorage.setItem("a",JSON.stringify([1,2,3,4,5]))
JSON.parse(sessionStorage.getItem("a") )  // [1,2,3,4];


對象
// 錯誤處理方式
sessionStorage.setItem("a",{id:"134",name:"33"})
sessionStorage.getItem("a")  //  "[object Object]"  ,返回的這種數據都沒得辦法處理


// 正確處理方式
sessionStorage.setItem("a",JSON.stringify({id:"134",name:"33"}))
JSON.parse(sessionStorage.getItem("a") ); //  {id:"134",name:"33"}

常見使用方式

sessionStorage 可以存儲些用戶信息，在瀏覽器關閉前不怎么改變的比方下拉框

getSelectData("userType",function(data){

  console.log(data);

});


 function  getSelectData(key,callback){

     var storeMap = {};

     var key_url = {
     "user": "api/user",
     "orderStatus":"api/order/status",
     "userType": "api/user/type"

     }

     var result = getStore(key);
     if(result){
        callback(result);
        return ;
     }

     $.get(key_url[key],).done(function(data){
        setStore(key,data);
        callback(data);
     });

     function setStore(key,value){
            sessionStorage.setItem(key,JSON.stringify(value))
     }

     function getStore(key){
        var result = sessionStorage.getItem(key);
        if(!result){
            return null;
        }
        return JSON.parse(result)
     }

 }

GPU云服務器云服務器 localstorage存儲存儲localstorage 免費localstorage存儲對象 Sessionstorage

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

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

[聊一聊系列]聊一聊前端存儲那些事兒

摘要：如圖圖顧名思義，，是級別的存儲。如筆者寫的一篇淺析文章聊一聊百度移動端首頁前端速度那些事兒讀者們可以嘗試使用。歡迎大家收看聊一聊系列，這一套系列文章，可以幫助前端工程師們了解前端的方方面面（不僅僅是代碼）：https://segmentfault.com/blog/frontenddriver 在web開發越來越復雜的今天，前端擁有的能力也越來越多。其中最重要的一項莫過于web存儲。...

caige 2019-08-19 18:46 評論0 收藏0
前端存儲 - localStorage

摘要：發布自的博客，歡迎大家轉載，但是要注意注明出處介紹在中，引入了兩個新的前端存儲特性這兩者非常相似，都是用來在前端保存一定量的數據，稱為前端存儲，但是這兩者仍然存在一定區別生命周期的生命周期是永久的，即使關閉頁面瀏覽器，其中的內容也不會消失，發布自Kindem的博客，歡迎大家轉載，但是要注意注明出處 localStorage 介紹在HTML5中，引入了兩個新的前端存儲特性： loc...

DandJ 2019-08-22 18:34 評論0 收藏0
印象最深的一個bug：sessionStorage緩存在移動端失效

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

yuxue 2021-11-18 10:07 評論0 收藏0