在客户端存储数据，HTML5 提供了两种在客户端存储数据的新方法：
localStorage - 没有时间限制的数据存储
sessionStorage - 针对一个 session 的数据存储
之前，这些都是由 cookie 完成的。但是 cookie 不适合大量数据的存储，因为它们由每个对服务器的请求来传递，这使得 cookie 速度很慢而且效率也不高。
在 HTML5 中，数据不是由每个服务器请求传递的，而是只有在请求时使用数据。它使在不影响网站性能的情况下存储大量数据成为可能。
localStorage的使用遵循同源策略，对于不同的网站，数据存储于不同的区域，并且一个网站只能访问其自身的数据。
localStorage解决了cookie存储空间不足的问题(cookie中每条cookie的存储空间为4k)，localStorage中一般浏览器支持的是5M大小，这个在不同的浏览器中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使用实例1：
1 //localStorage的浏览器支持情况： 2 3 //1. 判断浏览器是否支持localStorage这个属性 4 if(！window.localStorage){ 5 alert("浏览器支持localstorage"); 6 return false; 7 }else{ 8 //主逻辑业务 9 } 10 11 12 //localStorage的写入、修改、删除、读取 13 14 if(！window.localStorage){ 15 alert("浏览器支持localstorage"); 16 return false; 17 }else{ 18 var storage=window.localStorage; 19 //写入或修改a字段 20 storage["a"]=1; 21 //写入或修改b字段 22 storage.b=1; 23 //写入或修改c字段 24 storage.setItem("c",3); 25 console.log(typeof storage["a"]); //string 26 console.log(typeof storage["b"]); //string 27 console.log(typeof storage["c"]); //string 28 //localStorage的键获取 29 for(var i=0;i<storage.length;i++){ 30 //使用key()方法，向其中出入索引即可获取对应的键 31 var key=storage.key(i); 32 console.log(key); 33 } 34 //存储json 35 //localStorage只支持string类型的存储。 36 /* 37 一般我们会将JSON存入localStorage中，但是在localStorage会自动将localStorage转换成为字符串形式 38 这个时候我们可以使用JSON.stringify()这个方法，来将JSON转换成为JSON字符串 39 */ 40 var data={ 41 name:'xiecanyong', 42 sex:'man', 43 hobby:'program' 44 }; 45 var d=JSON.stringify(data); 46 storage.setItem("data",d); 47 console.log(storage.data); 48 //读取之后使用JSON.parse()方法将JSON字符串转换成为JSON对象， 49 50 //将localStorage中的某个键值对删除 51 storage.removeItem("a"); 52 //将localStorage的所有内容清除 53 storage.clear(); 54 }
localStorage使用实例2：
1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8" /> 5 <title>Document</title> 6 </head> 7 8 <body> 9 <script type="text/javascript"> 10 window.onload = function() { 11 12 if(window.localStorage){ 13 //主逻辑业务 14 window.localStorage.clear(); //清除所有的变量和值 15 window.localStorage.a = 100; 16 window.localStorage["b"] = 200; 17 window.localStorage.setItem("c", 300); 18 19 console.log("window.localStorage.a=" + window.localStorage.a); 20 console.log("window.localStorage['b']=" + window.localStorage["b"]); 21 console.log("window.localStorage.getItem('c')=" + window.localStorage.getItem("c")); 22 23 console.log(window.localStorage); 24 console.log(typeof window.localStorage); 25 for (var i = 0; i < window.localStorage.length; i++) { 26 var key1 = window.localStorage.key(i); 27 var key2 = window.localStorage.getItem(key1); 28 console.log("字段名：" + key1 + " 值：" + key2); 29 } 30 31 console.log(typeof window.localStorage.a); 32 console.log(typeof window.localStorage['b']); 33 console.log(typeof window.localStorage.getItem('c')); 34 35 36 console.log("空了：" + window.localStorage); 37 window.localStorage.SB = "我是你大爷!"; 38 window.localStorage.aaa = "this is test!"; 39 window.localStorage.removeItem("aaa"); 40 41 console.log("-------------------------------------------------"); 42 var storage = window.localStorage; 43 var data = { 44 name: 'xiecanyong', 45 sex: 'man', 46 hobby: 'program' 47 }; 48 var d = JSON.stringify(data); 49 console.log(typeof d); 50 storage.setItem("data", d); 51 console.log(storage.data); 52 53 var json = storage.getItem("data"); 54 var jsonObj = JSON.parse(json); 55 console.log(typeof jsonObj); 56 console.log(storage.data); 57 }else{ 58 alert("浏览器不支持localstorage"); 59 return false; 60 } 61 } 62 </script> 63 </body> 64 65 </html>
纯文字版代码1：
//localStorage的浏览器支持情况：
//1. 判断浏览器是否支持localStorage这个属性
if(！window.localStorage){
alert("浏览器支持localstorage");
return false;
}else{
//主逻辑业务
}
//localStorage的写入、修改、删除、读取
if(！window.localStorage){
alert("浏览器支持localstorage");
return false;
}else{
var storage=window.localStorage;
//写入或修改a字段
storage["a"]=1;
//写入或修改b字段
storage.b=1;
//写入或修改c字段
storage.setItem("c",3);
console.log(typeof storage["a"]); //string
console.log(typeof storage["b"]); //string
console.log(typeof storage["c"]); //string
//localStorage的键获取
for(var i=0;i<storage.length;i++){
//使用key()方法，向其中出入索引即可获取对应的键
var key=storage.key(i);
console.log(key);
}
//存储json
//localStorage只支持string类型的存储。
/*
一般我们会将JSON存入localStorage中，但是在localStorage会自动将localStorage转换成为字符串形式
这个时候我们可以使用JSON.stringify()这个方法，来将JSON转换成为JSON字符串
*/
var data={
name:'xiecanyong',
sex:'man',
hobby:'program'
};
var d=JSON.stringify(data);
storage.setItem("data",d);
console.log(storage.data);
//读取之后使用JSON.parse()方法将JSON字符串转换成为JSON对象，
//将localStorage中的某个键值对删除
storage.removeItem("a");
//将localStorage的所有内容清除
storage.clear();
}
纯文字版代码2：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
</head>
<body>
<script type="text/javascript">
window.onload = function() {
if(window.localStorage){
//主逻辑业务
window.localStorage.clear(); //清除所有的变量和值
window.localStorage.a = 100;
window.localStorage["b"] = 200;
window.localStorage.setItem("c", 300);
console.log("window.localStorage.a=" + window.localStorage.a);
console.log("window.localStorage['b']=" + window.localStorage["b"]);
console.log("window.localStorage.getItem('c')=" + window.localStorage.getItem("c"));
console.log(window.localStorage);
console.log(typeof window.localStorage);
for (var i = 0; i < window.localStorage.length; i++) {
var key1 = window.localStorage.key(i);
var key2 = window.localStorage.getItem(key1);
console.log("字段名：" + key1 + " 值：" + key2);
}
console.log(typeof window.localStorage.a);
console.log(typeof window.localStorage['b']);
console.log(typeof window.localStorage.getItem('c'));
console.log("空了：" + window.localStorage);
window.localStorage.SB = "我是你大爷!";
window.localStorage.aaa = "this is test!";
window.localStorage.removeItem("aaa");
console.log("-------------------------------------------------");
var storage = window.localStorage;
var data = {
name: 'xiecanyong',
sex: 'man',
hobby: 'program'
};
var d = JSON.stringify(data);
console.log(typeof d);
storage.setItem("data", d);
console.log(storage.data);
var json = storage.getItem("data");
var jsonObj = JSON.parse(json);
console.log(typeof jsonObj);
console.log(storage.data);
}else{
alert("浏览器不支持localstorage");
return false;
}
}
</script>
</body>
</html>
done!