html5的localstorage,HTML5 localStorage使用教程

在客户端存储数据，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 15 alert("浏览器支持localstorage"16 17 }18 var storage=window.localStorage;19 写入或修改a字段

20 storage["a"]=121 写入或修改b字段

22 storage.b=123 写入或修改c字段

24 storage.setItem("c",325 console.log(typeof storage["a"]); string

26 console.log(typeof storage["b"]); 27 console.log(typeof storage["c"]); 28 localStorage的键获取

29 for(var i=0;i

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"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

2

3

4

5

Document

6

7

8

9

10 window.onload = function() {12 (window.localStorage){13 14 window.localStorage.clear(); 清除所有的变量和值

15 window.localStorage.a = 10016 window.localStorage["b"] = 20017 window.localStorage.setItem("c",30018

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(typeofwindow.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(32 console.log(typeof window.localStorage['b'33 console.log(typeof window.localStorage.getItem('c'34

35

36 console.log("空了：" +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'

};48 var d =JSON.stringify(data);49 console.log(d);50 storage.setItem("data"51 console.log(storage.data);52

53 var json = storage.getItem("data"54 var jsonObj =JSON.parse(json);55 console.log(jsonObj);56 57 }58 alert("浏览器不支持localstorage"59 60 }61 62

63

64

65

纯文字版代码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

//使用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：

Document

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;

}

}

done!

总结

如果觉得编程之家网站内容还不错，欢迎将编程之家网站推荐给程序员好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。

小编个人微信号 jb51ccc

喜欢与人分享编程技术与工作经验，欢迎加入编程之家官方交流群！