資訊專欄INFORMATION COLUMN
摘要：存儲(chǔ)目錄定義生命周期語法存儲(chǔ)大小注意點(diǎn)定義瀏覽器提供的，可以在當(dāng)前域名下存儲(chǔ)信息，只能存儲(chǔ)生命周期是關(guān)閉當(dāng)前頁就清楚了，一直都在，關(guān)閉瀏覽器也會(huì)存在語法存儲(chǔ)王五獲取清除存儲(chǔ)大小左右測(cè)試當(dāng)前瀏覽器存儲(chǔ)大小注意點(diǎn)存儲(chǔ)的時(shí)候要是，不要用數(shù)組或者
sessionStorage ,localStorage 存儲(chǔ) 目錄
定義
生命周期
語法
存儲(chǔ)大小
注意點(diǎn)
定義sessionStorage ,localStorage 瀏覽器提供的api，
可以在當(dāng)前域名下存儲(chǔ)信息，只能存儲(chǔ) string
sessionStorage 是關(guān)閉當(dāng)前 tab頁 就清楚了，localStorage 一直都在，關(guān)閉瀏覽器也會(huì)存在
語法存儲(chǔ)
sessionStorage.setItem(key,value);
sessionStorage.setItem("userName","王五");
獲取
var result = sessionStorage.getItem(key);
清除
sessionStorage.clear();
測(cè)試 當(dāng)前瀏覽器存儲(chǔ)大小 http://dev-test.nemikor.com/w...
注意點(diǎn)存儲(chǔ)的時(shí)候 value 要是 string ，不要用數(shù)組 或者 對(duì)象
數(shù)組
// 錯(cuò)誤處理方式
sessionStorage.setItem("a",[1,2,3,4,5])
sessionStorage.getItem("a") // "1,2,3,4,5" 這樣處理的話，返回成了一個(gè) string，得自己在轉(zhuǎn)換成 數(shù)組
// 正確處理方式
sessionStorage.setItem("a",JSON.stringify([1,2,3,4,5]))
JSON.parse(sessionStorage.getItem("a") ) // [1,2,3,4];
對(duì)象
// 錯(cuò)誤處理方式
sessionStorage.setItem("a",{id:"134",name:"33"})
sessionStorage.getItem("a") // "[object Object]" ,返回的這種數(shù)據(jù)都沒得辦法處理
// 正確處理方式
sessionStorage.setItem("a",JSON.stringify({id:"134",name:"33"}))
JSON.parse(sessionStorage.getItem("a") ); // {id:"134",name:"33"}
常見使用方式
sessionStorage 可以存儲(chǔ)些用戶信息，在瀏覽器關(guān)閉前不怎么改變的 比方下拉框
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)
}
}
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/96159.html
摘要：如圖圖顧名思義，，是級(jí)別的存儲(chǔ)。如筆者寫的一篇淺析文章聊一聊百度移動(dòng)端首頁前端速度那些事兒讀者們可以嘗試使用。 歡迎大家收看聊一聊系列，這一套系列文章，可以幫助前端工程師們了解前端的方方面面（不僅僅是代碼）：https://segmentfault.com/blog/frontenddriver 在web開發(fā)越來越復(fù)雜的今天，前端擁有的能力也越來越多。其中最重要的一項(xiàng)莫過于web存儲(chǔ)。...
摘要：發(fā)布自的博客，歡迎大家轉(zhuǎn)載，但是要注意注明出處介紹在中，引入了兩個(gè)新的前端存儲(chǔ)特性這兩者非常相似，都是用來在前端保存一定量的數(shù)據(jù)，稱為前端存儲(chǔ)，但是這兩者仍然存在一定區(qū)別生命周期的生命周期是永久的，即使關(guān)閉頁面瀏覽器，其中的內(nèi)容也不會(huì)消失， 發(fā)布自Kindem的博客，歡迎大家轉(zhuǎn)載，但是要注意注明出處 localStorage 介紹 在HTML5中，引入了兩個(gè)新的前端存儲(chǔ)特性： loc...
摘要：移動(dòng)端緩存失效是我印象最深的一個(gè)之一，為啥呢，因?yàn)檫@個(gè)問題導(dǎo)致我加班到很晚。的生命周期是僅在當(dāng)前會(huì)話下有效。引入了一個(gè)瀏覽器窗口的概念，是在同源的窗口中始終存在的數(shù)據(jù)。無bug，不程序：作為程序員的我，不是修bug就是在寫bug的路上?！ ∫苿?dòng)端sessionStorage緩存失效是我印象最深的一個(gè)bug之一，為啥呢，因?yàn)檫@個(gè)問題導(dǎo)致我加班到很晚。在現(xiàn)在看來就是一個(gè)簡(jiǎn)單的概念問題。在我剛工作...
閱讀 3516·2021-11-15 11:38
閱讀 836·2021-11-08 13:27
閱讀 2250·2021-07-29 14:50
閱讀 2977·2019-08-29 13:06
閱讀 848·2019-08-29 11:22
閱讀 2419·2019-08-29 11:04
閱讀 3510·2019-08-28 18:23
閱讀 896·2019-08-26 13:46
