LocalStorage、SessionStorage使用詳解
一、什麼是localStorage、sessionStorage
在HTML5中,新加入了一個localStorage特性,這個特性主要是用來作為本地儲存來使用的,解決了cookie儲存空間不足的問題(cookie中每條cookie的儲存空間為4k),localStorage中一般瀏覽器支援的是5M大小,這個在不同的瀏覽器中localStorage會有所不同。
二、localStorage的優勢與侷限
localStorage的優勢
1、localStorage拓展了cookie的4K限制
2、localStorage會可以將第一次請求的資料直接儲存到本地,這個相當於一個5M大小的針對於前端頁面的資料庫,相比於cookie可以節約頻寬,但是這個卻是隻有在高版本的瀏覽器中才支援的
localStorage的侷限
1、瀏覽器的大小不統一,並且在IE8以上的IE版本才支援localStorage這個屬性
2、目前所有的瀏覽器中都會把localStorage的值型別限定為string型別,這個在對我們日常比較常見的JSON物件型別需要一些轉換
3、localStorage在瀏覽器的隱私模式下面是不可讀取的
4、localStorage本質上是對字串的讀取,如果儲存內容多的話會消耗記憶體空間,會導致頁面變卡
5、localStorage不能被爬蟲抓取到
localStorage與sessionStorage的唯一一點區別就是localStorage屬於永久性儲存,而sessionStorage屬於當會話結束的時候,sessionStorage中的鍵值對會被清空
這裡我們以localStorage來分析
三、localStorage的使用
localStorage的瀏覽器支援情況:
這裡要特別宣告一下,如果是使用IE瀏覽器的話,那麼就要UserData來作為儲存,這裡主要講解的是localStorage的內容,所以userData不做過多的解釋,而且以博主個人的看法,也是沒有必要去學習UserData的使用來的,因為目前的IE6/IE7屬於淘汰的位置上,而且在如今的很多頁面開發都會涉及到HTML5\CSS3等新興的技術,所以在使用上面一般我們不會去對其進行相容
首先在使用localStorage的時候,我們需要判斷瀏覽器是否支援localStorage這個屬性
if(!window.localStorage){ alert("瀏覽器支援localstorage"); return false; }else{ //主邏輯業務 }
localStorage的寫入,localStorage的寫入有三種方法,這裡就一一介紹一下
if(!window.localStorage){ alert("瀏覽器支援localstorage"); return false; }else{ var storage=window.localStorage; //寫入a欄位 storage["a"]=1; //寫入b欄位 storage.a=1; //寫入c欄位 storage.setItem("c",3); console.log(typeof storage["a"]); console.log(typeof storage["b"]); console.log(typeof storage["c"]); }
執行後的結果如下:
這裡要特別說明一下localStorage的使用也是遵循同源策略的,所以不同的網站直接是不能共用相同的localStorage
最後在控制檯上面打印出來的結果是:
不知道各位讀者有沒有注意到,剛剛儲存進去的是int型別,但是打印出來卻是string型別,這個與localStorage本身的特點有關,localStorage只支援string型別的儲存。
localStorage的讀取
if(!window.localStorage){ alert("瀏覽器支援localstorage"); }else{ var storage=window.localStorage; //寫入a欄位 storage["a"]=1; //寫入b欄位 storage.a=1; //寫入c欄位 storage.setItem("c",3); console.log(typeof storage["a"]); console.log(typeof storage["b"]); console.log(typeof storage["c"]); //第一種方法讀取 var a=storage.a; console.log(a); //第二種方法讀取 var b=storage["b"]; console.log(b); //第三種方法讀取 var c=storage.getItem("c"); console.log(c); }
這裡面是三種對localStorage的讀取,其中官方推薦的是getItem\setItem這兩種方法對其進行存取,不要問我這個為什麼,因為這個我也不知道
我之前說過localStorage就是相當於一個前端的資料庫的東西,資料庫主要是增刪查改這四個步驟,這裡的讀取和寫入就相當於增、查的這兩個步驟
下面我們就來說一說localStorage的刪、改這兩個步驟
改這個步驟比較好理解,思路跟重新更改全域性變數的值一樣,這裡我們就以一個為例來簡單的說明一下
if(!window.localStorage){ alert("瀏覽器支援localstorage"); }else{ var storage=window.localStorage; //寫入a欄位 storage["a"]=1; //寫入b欄位 storage.b=1; //寫入c欄位 storage.setItem("c",3); console.log(storage.a); // console.log(typeof storage["a"]); // console.log(typeof storage["b"]); // console.log(typeof storage["c"]); /*分割線*/ storage.a=4; console.log(storage.a); }
這個在控制檯上面我們就可以看到已經a鍵已經被更改為4了
localStorage的刪除
1、將localStorage的所有內容清除
var storage=window.localStorage; storage.a=1; storage.setItem("c",3); console.log(storage); storage.clear(); console.log(storage);
2、 將localStorage中的某個鍵值對刪除
var storage=window.localStorage; storage.a=1; storage.setItem("c",3); console.log(storage); storage.removeItem("a"); console.log(storage.a);
控制檯檢視結果
localStorage的鍵獲取
var storage=window.localStorage; storage.a=1; storage.setItem("c",3); for(var i=0;i<storage.length;i++){ var key=storage.key(i); console.log(key); }
使用key()方法,向其中出入索引即可獲取對應的鍵
四、localStorage其他注意事項
一般我們會將JSON存入localStorage中,但是在localStorage會自動將localStorage轉換成為字串形式
這個時候我們可以使用JSON.stringify()這個方法,來將JSON轉換成為JSON字串
示例:
if(!window.localStorage){ alert("瀏覽器支援localstorage"); }else{ var storage=window.localStorage; var data={ name:'xiecanyong', sex:'man', hobby:'program' }; var d=JSON.stringify(data); storage.setItem("data",d); console.log(storage.data); }
讀取之後要將JSON字串轉換成為JSON物件,使用JSON.parse()方法
var storage=window.localStorage; var data={ name:'xiecanyong', sex:'man', hobby:'program' }; var d=JSON.stringify(data); storage.setItem("data",d); //將JSON字串轉換成為JSON物件輸出 var json=storage.getItem("data"); var jsonObj=JSON.parse(json); console.log(typeof jsonObj);
打印出來是Object物件
另外還有一點要注意的是,其他型別讀取出來也要進行轉換
相關推薦
localStorage、sessionStorage詳解,以及storage事件使用
有關localStorage和sessionStorage的特性。 localStorage本身帶有方法有 新增鍵值對:localStorage.setItem(key,value),如果key存在時,更新value。 獲取鍵值:localStorage.getItem(key),如果key不存在返回
sessionStorage、localStorage與cookie、session詳解
cookie和session的區別 由於HTTP是一種無狀態的協議,資料交換完畢後會關閉連線,為了分辨一個請求是誰發起的,以免在同一個網站每開啟一個頁面都需要重新登入,引入了Session和Cookie兩個機制。 Cookie和Session都是用來跟蹤瀏覽器使用者身份的方式。 1、
LocalStorage、SessionStorage使用詳解
一、什麼是localStorage、sessionStorage 在HTML5中,新加入了一個localStorage特性,這個特性主要是用來作為本地儲存來使用的,解決了cookie儲存空間不足的問題(cookie中每條cookie的儲存空間為4k),localStorage中一般瀏覽器支援的是5M大小,
css中的px、em、rem 詳解
博客 選擇 原因 www order size arc 字體 處理 概念介紹: 1、px (pixel,像素):是一個虛擬長度單位,是計算機系統的數字化圖像長度單位,如果px要換算成物理長度,需要指定精度DPI(Dots Per Inch,每英寸像素數),在掃描打印時一般
Storm概念、原理詳解及其應用(一)BaseStorm
when 結構 tails 並發數 vm 虛擬機 cif 異步 優勢 name 本文借鑒官文,添加了一些解釋和看法,其中有些理解,寫的比較粗糙,有問題的地方希望大家指出。寫這篇文章,是想把一些官文和資料中基礎、重點拿出來,能總結出便於大家理解的話語。與大多數“wordc
slice()、splice()詳解
log 破壞 light clas logs 數組 刪除 ora 自己 前面在開發的時候對於slice()、splice()這兩個函數老是模糊不清,不清楚具體的參數傳參以及用法。 今天寫個筆記專門記錄一下。 1、slice() 從指定位置刪除數組裏面的元素,可以傳一個或者
Oracle not in查不到應有的結果(NULL、IN、EXISTS詳解)
from 邏輯運算 zha order .net 提升 特點 where zhang 問題:語句1 : Select * from table1 A where A.col1 not in ( select col1 from table2
24、sam- 詳解 https://davetang.org/wiki/tiki-index.php?page=SAM
sco tran lis string轉換 similar in use 位置 rac tro 編輯距離Edit Distance:從字符串a變到字符串b,所需要的最少的操作步驟(插入I,刪除D,更改)為兩個字符串之間的編輯距離。這也是sam文檔中對NM這個tag的定義。編
CGI編程中POST、GET詳解
cgi編程中post、get詳解什麽是 HTTP?超文本傳輸協議(HTTP)的設計目的是保證客戶機與服務器之間的通信。HTTP 的工作方式是客戶機與服務器之間的請求-應答協議。web 瀏覽器可能是客戶端,而計算機上的網絡應用程序也可能作為服務器端。舉例:客戶端(瀏覽器)向服務器提交 HTTP 請求;服務器向客
cookie、json詳解
font eval 全局變量 var 如果 split cookies 有效 cti 什麽是cookie 1.cookie是存儲於訪問者計算機中的變量2.cookie是瀏覽器提供的一種機制3.可以由js控制(設置、讀取、刪除)4.cookie可以實現跨頁面全局變量可以跨越同
[轉載]Linux C 字符串函數 sprintf()、snprintf() 詳解
數組 test 不足 同時 逗號 itoa 表示 成了 nat 一、sprintf() 函數詳解 在將各種類 型的數據構造成字符串時,sprintf 的強大功能很少會讓你失望。 由於 sprintf 跟 printf 在用法上幾乎一樣,只是打印的目的地不同而已,前者打印到字
原碼、反碼、補碼 詳解
blog 應該 符號 order 感覺 最小值 而是 們的 有符號 作者:張子秋出處:http://www.cnblogs.com/zhangziqiu/ 本文版權歸作者和博客園共有,歡迎轉載,但未經作者同意必須保留此段聲明,且在文章頁面明顯位置給出原文連接,否則保留追究法
javascript中call、apply、bind詳解
組裝 div 分析 rgs 特性 類型 bind詳解 中修改 不支持 1.apply和call的區別在哪裏 2.什麽情況下用apply,什麽情況下用call 3.apply的其他巧妙用法(一般在什麽情況下可以使用apply) 我首先從網上查到關於apply和
HTML5的離線存儲 localStorage、sessionStorage、cookies
cookie 刪除 clas 關閉 服務 blog class div 瀏覽器 cookie 在瀏覽器和服務器間來回傳遞。sessionStorage 和 localStorage 不會; sessionStorage 和 localStorage 的存儲空間更大; ses
【我的Linux,我做主】Linux系統文件操作之cp、rm、mv詳解
Linux基礎知識 系統運維 對文本文件的操作非常基礎而且和重要,掌握它們後操作文本你會更加得心應手。要復制文件,請使用cp(copy)這個命令,cp這個命令的用途可多了,除了單純的復制之外,還可以建立建立快捷方式,對比兩個文件的新舊程度從而決定是否更新,以及復制整個目錄下的文件等功能。至於移動目錄和
shell循環:for、while、until——詳解
循環 for while until 循環執行 :將某代碼段重復運行多次; 重復運行多少次: 循環次數事先已知 ;循環次數事先未知 ;有進入條件和退出條件。三種循環體:for、while、until。再循環前前介紹步進,在循環中經常用到步進。步進顯示1-10[root@centos6mini
python讀文件的三個方法read()、readline()、readlines()詳解
pytho class readline col 變量 type 返回 限制 log """ 1、讀取文件的三個方法:read()、readline()、readlines() 2、三個方法均可接受一個變量用以限制每次讀取的數據量,通常不使用該變量。 """
磁盤調度算法FCFS、SSTF、SCAN、CSCAN詳解
磁盤調度算法 Java實現 常見的磁盤調度算法有:1.FCFS:先來先服務算法;2.SSTF:最短尋道時間算法;3.SCAN:掃描算法(也叫電梯調度算法);4.CSCAN:循環掃描算法 算法的詳細介紹:FCFS:算法思想非常簡單,就是不論初始磁頭在什麽位置,都是按照服務隊列的先後順序依次處理進程,可以
2 類、實例、屬性、方法詳解
obj tps 圖片 AD lex 間接 年齡 AS 其它 類的語法 上面的代碼其實有問題,屬性名字和年齡都寫死了,想傳名字傳不進去。 1 class Person(object): 2 def __init__(self, name, age): 3 se
js 中offsetTop、offsetLeft、offsetWidth、offsetHeight詳解
tle setw lse solid 內容 art AI 垂直滾動條 one 1. 偏移量共包括offsetTop、offsetLeft、offsetWidth、offsetHeight 元素:內容大小(width、height)、內邊距(padding)、邊框(borde