localStorage和sessionStorage

時間 2019-11-29

標籤 localstorage sessionstorage 欄目網站開發简体版

原文原文鏈接

localStorage的優點與侷限：　

localStorage的優點javascript

一、localStorage拓展了cookie的4K限制html

二、localStorage會能夠將第一次請求的數據直接存儲到本地，這個至關於一個5M大小的針對於前端頁面的數據庫，相比於cookie能夠節約帶寬，可是這個倒是隻有在高版本的瀏覽器中才支持的前端

localStorage的侷限java

一、瀏覽器的大小不統一，而且在IE8以上的IE版本才支持localStorage這個屬性jquery

二、目前全部的瀏覽器中都會把localStorage的值類型限定爲string類型，這個在對咱們平常比較常見的JSON對象類型須要一些轉換數據庫

三、localStorage在瀏覽器的隱私模式下面是不可讀取的瀏覽器

四、localStorage本質上是對字符串的讀取，若是存儲內容多的話會消耗內存空間，會致使頁面變卡cookie

五、localStorage不能被爬蟲抓取到session

localStorage與sessionStorage的惟一一點區別就是localStorage屬於永久性存儲，而sessionStorage屬於當會話結束的時候，sessionStorage中的鍵值對會被清空post

這裏咱們以localStorage來分析

localStorage使用：

　　html代碼：

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8">
 5     <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
 6     <title></title>
 7     <script type="text/javascript" src="js/jquery-1.11.3.js" ></script>
 8     <script type="text/javascript" src="js/use.js" ></script>
 9     <script type="text/javascript" src="js/localStorage.js" ></script>
11 </head>
12 <body>
13     <div>
14         <input type="button" value="儲存localStorage" class="btnLayIn1" />
15         <input type="button" value="顯示localStorage" class="btnShow1" />
16         <input type="button" value="清除" class="btnClear1" />
17         <input type="text" placeholder="顯示localStorage" class="txtShow1" />
18     </div>
27 </body>
28 </html>

JavaScript代碼：

localStorage.js：

$(function(){
	//顯示
	$('.btnShow1').click(function(){
		$('.txtShow1').val("用戶名："+localStorage.UserName+"，密碼："+localStorage.Pwd);
	})
	
	//清除
	$('.btnClear1').click(function(){
		localStorage.removeItem('UserName')//清除單個
//		localStorage.clear();//清除全部
	})
})

use.js

 1 $(function(){
 2     //    儲存localStorage
 3     $('.btnLayIn1').click(function(){
 4         localStorage.UserName="Admin";
 5         localStorage.Pwd="123";
 6     })12 })

sessionStorage:

sessionStorage 的生命週期是在瀏覽器關閉前。在整個瀏覽器未關閉前，其數據一直都是存在的。

sessionStorage的使用:

　　html代碼：

 1 <!DOCTYPE html>
 2  2 <html>
 3  3 <head>
 4  4     <meta charset="utf-8">
 5  5     <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
 6  6     <title></title>
 7  7     <script type="text/javascript" src="js/jquery-1.11.3.js" ></script>
 8  8     <script type="text/javascript" src="js/use.js" ></script>
 9  9     <script type="text/javascript" src="js/sessionStorage.js" ></script>
10 10 </head>
11 11 <body>
12 12     <div>
13 13         <input type="button" value="儲存localStorage" class="btnLayIn1" />
14 14         <input type="button" value="顯示localStorage" class="btnShow1" />
15 15         <input type="button" value="清除" class="btnClear1" />
16 16         <input type="text" placeholder="顯示localStorage" class="txtShow1" />
17 17     </div>
18 18 </body>
19 19 </html>

JavaScript代碼：

sessionStorage.js:

$(function(){
    //顯示
    $('.btnShow2').click(function(){
        $('.txtShow2').val("省份："+sessionStorage.province+"，城市："+sessionStorage.city);
    })
    
    //清除
    $('.btnClear2').click(function(){
        sessionStorage.removeItem("city")//清除單個
//        sessionStorage.clear()//清除全部
    })
})

use.js:

1 $(function(){
2     $('.btnLayIn2').click(function(){
3         sessionStorage.city="廣州";
4         sessionStorage.province="廣東";
5     })
6 })

相關標籤/搜索

localstorage&sessionstorage

cookie&sessionstorage&localstorage

vue+elementui+vuex+sessionstorage

vue2.0+vuex+localstorage

vue+less+localstorage

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。