web前端必须掌握的localStorage

浏览数：29 / 时间：2015年06月09日

先自我介绍一下，本人男，27岁，单身，web前端程序员一枚，长期潜伏在幕后，只学不教（貔貅么？），其实主要是工作太忙了，每天忙到11点左右，没有时间写东西，洗洗就睡了。最近赶巧，后端那边出技术瓶颈了，因而小休息了两天，优化了一下自己的grunt自动化。

今天天气很好，阳光明媚的，突然一激动就想开个博客了，当然作为博客园新人不来点料不是霸占资源么，思来想去还是先教教新手们如何使用localStorage吧，毕竟这个东西对前端来说太重要了。

好了，闲话不说进入正题。

localStorage，俗名本地存储，是一个只有5M大小的浏览器端存储工具，不过相比cookie的几K存储量来说，存储空间还算是提升了不少，这个东东在哪里看呢(⊙o⊙)?

打开浏览器—>F12—>算了直接上图吧o(╯□╰)o

上图：

技术分享

看吧，不是个很复杂的东西，很直观嘛，下面教大家如何使用，

第一步，

算了，知道你们都是懒虫，我直接封装好了，copy吧：

 1 /*设置与获取Cookie*/
 2 var Cookie ={}
 3 Cookie.write = function(key, value, duration){
 4 var d = new Date();
 5 d.setTime(d.getTime()+1000*60*60*24*30);
 6 document.cookie = key + "=" + encodeURI(value) + "; expires=" + d.toGMTString();
 7 };
 8 Cookie.read = function(key){
 9 var arr = document.cookie.match(new RegExp("(^| )"+key+"=([^;]*)(;|$)"));
10 if(arr != null)
11 return decodeURIComponent(arr[2]);
12 return "";
13 };
14 //定义本地存储对象
15 var storage = {
16  getItem:function(key){//假如浏览器支持本地存储则从localStorage里getItem，否则乖乖用Cookie
17  return window.localStorage? localStorage.getItem(key): Cookie.read(key); 
18  },
19  setItem:function(key,val){//假如浏览器支持本地存储则调用localStorage，否则乖乖用Cookie
20   if (window.localStorage) {
21       localStorage.setItem(key,val); 
22   } else {
23    Cookie.write(key,val); 
24   }
25  }
26  };

封装的比较简单，如果有更多需要可以自己再扩张一下，使用的话是蛮简单的，

举例：

storage.setItem("UserName","黄大帅哥");//将UserName存进去
if(storage.getItem("UserName"))//假如存进去了
{
 console.log(storage.getItem("UserName"));//打印出来样子
}

注意事项：

因为localStorage存储进去的都是string类型，所以如果要存json记得存前读后做些处理

var myJson={"UserName","黄大帅哥"};

storage.setItem("MyJson",JSON.stringify(myJson));//将myJson存进去，记得JSON.stringify转成字符串

var getmyJson=JSON.parse(storage.getItem("MyJson"));//取出来的是字符串，记得JSON.parse还原一下

结尾：是不是觉得玩转localStorage如此轻松了，将来什么性能优化，减少与服务器的请求，用户历史行为记录等都可以通过它来完成，就看你能想到多少灵感了

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

web前端必须掌握的localStorage