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使用：
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 })