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 })