本地存儲(chǔ)localStorage用法詳解
一、什么是localStorage?
在HTML5中,新加入了一個(gè)localStorage特性,這個(gè)特性主要是用來作為本地存儲(chǔ)來使用的,解決了cookie存儲(chǔ)空間不足的問題(cookie中每條cookie的存儲(chǔ)空間為4k),localStorage中一般瀏覽器支持的是5M大小,這個(gè)在不同的瀏覽器中l(wèi)ocalStorage會(huì)有所不同。
二、localStorage的優(yōu)勢(shì)與局限
localStorage的優(yōu)勢(shì)
1、localStorage拓展了cookie的4K限制
2、localStorage會(huì)可以將第一次請(qǐng)求的數(shù)據(jù)直接存儲(chǔ)到本地,這個(gè)相當(dāng)于一個(gè)5M大小的針對(duì)于前端頁面的數(shù)據(jù)庫,相比于cookie可以節(jié)約帶寬,但是這個(gè)卻是只有在高版本的瀏覽器中才支持的
localStorage的局限
1、瀏覽器的大小不統(tǒng)一,并且在IE8以上的IE版本才支持localStorage這個(gè)屬性
2、目前所有的瀏覽器中都會(huì)把localStorage的值類型限定為string類型,這個(gè)在對(duì)我們?nèi)粘1容^常見的JSON對(duì)象類型需要一些轉(zhuǎn)換
3、localStorage在瀏覽器的隱私模式下面是不可讀取的
4、localStorage本質(zhì)上是對(duì)字符串的讀取,如果存儲(chǔ)內(nèi)容多的話會(huì)消耗內(nèi)存空間,會(huì)導(dǎo)致頁面變卡
5、localStorage不能被爬蟲抓取到
localStorage與sessionStorage的唯一一點(diǎn)區(qū)別就是localStorage屬于永久性存儲(chǔ),而sessionStorage屬于當(dāng)會(huì)話結(jié)束的時(shí)候,sessionStorage中的鍵值對(duì)會(huì)被清空。
三、localStorage的使用
清空localStorage
localStorage.clear() // undefined localStorage //Storage {length: 0} 存儲(chǔ)數(shù)據(jù)
存儲(chǔ)數(shù)據(jù)
localStorage.setItem("name","caibin") //存儲(chǔ)名字為name值為caibin的變量 localStorage.name = "caibin"; // 等價(jià)于上面的命令 localStorage // Storage{name: "caibin", length: 1} 讀取數(shù)據(jù)
讀取數(shù)據(jù)
localStorage.getItem("name") //caibin,讀取保存在localStorage對(duì)象里名為name的變量的值 localStorage.name // "caibin" localStorage.valueOf() //讀取存儲(chǔ)在localStorage上的所有數(shù)據(jù) localStorage.key(0) // 讀取第一條數(shù)據(jù)的變量名(鍵值) //遍歷并輸出localStorage里存儲(chǔ)的名字和值 for(var i=0; i<localStorage.length;i++){ console.log('localStorage里存儲(chǔ)的第'+i+'條數(shù)據(jù)的名字為:'+localStorage.key(i)+',值為:'+localStorage.getItem(localStorage.key(i))); }
刪除某個(gè)變量
localStorage.removeItem("name"); //undefined localStorage // Storage {length: 0} 可以看到之前保存的name變量已經(jīng)從localStorage里刪除了
檢查localStorage里是否保存某個(gè)變量
// 這些數(shù)據(jù)都是測(cè)試的,是在我當(dāng)下環(huán)境里的,只是demo哦~ localStorage.hasOwnProperty('name') // true localStorage.hasOwnProperty('sex') // false
將數(shù)組轉(zhuǎn)為本地字符串
var arr = ['aa','bb','cc']; // ["aa","bb","cc"] localStorage.arr = arr //["aa","bb","cc"] localStorage.arr.toLocaleString(); // "aa,bb,cc"
將JSON存儲(chǔ)到localStorage里
var students = { xiaomin: { name: "xiaoming", grade: 1 }, teemo: { name: "teemo", grade: 3 } } students = JSON.stringify(students); //將JSON轉(zhuǎn)為字符串存到變量里 console.log(students); localStorage.setItem("students",students);//將變量存到localStorage里 var newStudents = localStorage.getItem("students"); newStudents = JSON.parse(students); //轉(zhuǎn)為JSON console.log(newStudents); // 打印出原先對(duì)象
以上就是本文的全部內(nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
js get和post請(qǐng)求實(shí)現(xiàn)代碼解析
這篇文章主要介紹了js get和post實(shí)現(xiàn)代碼解析,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-02-02頁面加載完后自動(dòng)執(zhí)行一個(gè)方法的js代碼
這篇文章主要介紹了加載完成一個(gè)頁面后自動(dòng)執(zhí)行一個(gè)方法,很簡單很實(shí)用,需要的朋友可以參考下2014-09-09關(guān)于火狐(firefox)及ie下event獲取的兩種方法
經(jīng)常有同事問我在火狐瀏覽器怎么獲取event的方法,大多是想獲取event.keyCode的功能,接下來為您介紹兩種實(shí)現(xiàn)方法,需要了解的朋友可以參考下2012-12-12javascript中html字符串轉(zhuǎn)化為jquery dom對(duì)象的方法
最近項(xiàng)目需求要開發(fā)百度地圖相關(guān)的一個(gè)應(yīng)用,需要從硬編碼的html字符串中提取自己想要的元素以及屬性信息,由于在js中或者jq中操作元素節(jié)點(diǎn)以及屬性都是使用dom對(duì)象或者jq對(duì)象。下面介紹javascript中html字符串轉(zhuǎn)化為jquery dom對(duì)象的方法,需要的朋友可以參考下2015-08-08微信小程序中獲取用戶手機(jī)號(hào)授權(quán)登錄詳細(xì)步驟
這篇文章主要給大家介紹了關(guān)于微信小程序中獲取用戶手機(jī)號(hào)授權(quán)登錄的詳細(xì)步驟,在微信小程序中開發(fā)者可以通過微信提供的API接口實(shí)現(xiàn)用戶登錄和獲取用戶的手機(jī)號(hào),需要的朋友可以參考下2023-07-07JavaScript實(shí)現(xiàn)點(diǎn)擊出現(xiàn)子菜單效果
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)點(diǎn)擊出現(xiàn)子菜單,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-02-02JS監(jiān)聽瀏覽器關(guān)閉、刷新及切換標(biāo)簽頁觸發(fā)事件代碼示例
瀏覽器是客戶端,客戶端的操作服務(wù)器是監(jiān)聽不到的,所以可以用js來監(jiān)聽,js代碼監(jiān)聽瀏覽器關(guān)閉或者刷新,這篇文章主要給大家介紹了關(guān)于JS監(jiān)聽瀏覽器關(guān)閉、刷新及切換標(biāo)簽頁觸發(fā)事件的相關(guān)資料,需要的朋友可以參考下2023-11-11圖片旋轉(zhuǎn)、鼠標(biāo)滾輪縮放、鏡像、切換圖片js代碼
這篇文章主要為大家介紹了圖片旋轉(zhuǎn)、鼠標(biāo)滾輪縮放、鏡像、切換圖片js代碼,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-01-01