亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

本地存儲(chǔ)localStorage用法詳解

 更新時(shí)間:2017年07月31日 16:06:08   作者:LLDD2014425  
這篇文章主要為大家詳細(xì)介紹了本地存儲(chǔ)localStorage的用法,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下

一、什么是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請(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代碼

    頁面加載完后自動(dòng)執(zhí)行一個(gè)方法的js代碼

    這篇文章主要介紹了加載完成一個(gè)頁面后自動(dòng)執(zhí)行一個(gè)方法,很簡單很實(shí)用,需要的朋友可以參考下
    2014-09-09
  • 關(guān)于火狐(firefox)及ie下event獲取的兩種方法

    關(guān)于火狐(firefox)及ie下event獲取的兩種方法

    經(jīng)常有同事問我在火狐瀏覽器怎么獲取event的方法,大多是想獲取event.keyCode的功能,接下來為您介紹兩種實(shí)現(xiàn)方法,需要了解的朋友可以參考下
    2012-12-12
  • javascript中html字符串轉(zhuǎn)化為jquery dom對(duì)象的方法

    javascript中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
  • 一文帶你理解JavaScript 觀察者模式

    一文帶你理解JavaScript 觀察者模式

    觀察者模式(Observer Pattern)是一種行為型設(shè)計(jì)模式,它定義了一種一對(duì)多的依賴關(guān)系,讓多個(gè)觀察者對(duì)象同時(shí)監(jiān)聽某一個(gè)主題對(duì)象,本文將帶你詳細(xì)了解JavaScript 觀察者模式,,需要的朋友可以參考下
    2023-05-05
  • 微信小程序中獲取用戶手機(jī)號(hào)授權(quán)登錄詳細(xì)步驟

    微信小程序中獲取用戶手機(jī)號(hào)授權(quán)登錄詳細(xì)步驟

    這篇文章主要給大家介紹了關(guān)于微信小程序中獲取用戶手機(jī)號(hào)授權(quán)登錄的詳細(xì)步驟,在微信小程序中開發(fā)者可以通過微信提供的API接口實(shí)現(xiàn)用戶登錄和獲取用戶的手機(jī)號(hào),需要的朋友可以參考下
    2023-07-07
  • JavaScript實(shí)現(xiàn)點(diǎn)擊出現(xiàn)子菜單效果

    JavaScript實(shí)現(xiàn)點(diǎn)擊出現(xiàn)子菜單效果

    這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)點(diǎn)擊出現(xiàn)子菜單,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2021-02-02
  • JS監(jiān)聽瀏覽器關(guān)閉、刷新及切換標(biāo)簽頁觸發(fā)事件代碼示例

    JS監(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
  • 不要在cookie中使用特殊字符的原因分析

    不要在cookie中使用特殊字符的原因分析

    參數(shù)name需要遵循規(guī)范RFC2109,也就是說name參數(shù)只能包含字母或者數(shù)字,不能包含逗號(hào)、分號(hào)、空格及美元符號(hào)。cookie的name屬性設(shè)置之后不能被修改。
    2010-07-07
  • 圖片旋轉(zhuǎn)、鼠標(biāo)滾輪縮放、鏡像、切換圖片js代碼

    圖片旋轉(zhuǎn)、鼠標(biāo)滾輪縮放、鏡像、切換圖片js代碼

    這篇文章主要為大家介紹了圖片旋轉(zhuǎn)、鼠標(biāo)滾輪縮放、鏡像、切換圖片js代碼,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2016-01-01

最新評(píng)論