数据缓存之storage和cookie及封装

  |   0 评论   |   6,904 浏览

不管是storage还是cookie它都是客户端数据缓存的一些技术点。都是为了网站访问速度更快。

区别

cookie历史遗留:    

缺点:       

    1:大小的限制:4KB 不能接受大数据     

    2:带宽的限制:cookie必须服务器和客户端数据会进行同步,过时,会去通知服务器清楚cookie数据    

    3:如果不加密的传输非常不安全      

    4:操作是非常复杂,document.cookie进行操作  

优点:会根据时间自动清楚数据.时效作用

storage:   

    1:存储的空间 5MB(四个名著 ) < storage < 10MB   

    2:没带宽限制  

    3:操作简单   

    4:独立的存储空间但是storage不能替代cookie。

storage的分类   

    会话级别:sessionStorage    

    本地存储:localStorage

常用的方法:

    设值:setItem(key,value);   

    取值:getItem(key,value)   

    删值:removeItem(key);    

    清除:clear();    

    个数:length取键:key(index),获取制定位置的键 index=0

使用:

<style type="text/css">
  #message{width:500px;height:120px;resize: none;padding:10px;}
</style>
<textarea id="message"></textarea>
<button id="save">保存说说</button>
<script> 
window.onload = function(){
    var html = localStorage.getItem("mk_username");
    if(html){
        document.getElementById("message").value = html;
    } 
    document.getElementById("message").onkeydown = function(){
        localStorage.setItem("mk_username",this.value);
    }; 
    document.getElementById("save").onclick = function(){
        alert("保存成功");
        document.getElementById("message").value = "";
        localStorage.removeItem("mk_username");
    };
};  
</script>

定义一个文本输入框。当我们键盘输入东西时就会同步将输入框的内容保存到本地,下次打开时就会自动填充上次输入的内容。点击保存时,将输入框的内容传给服务器保存。本地清空处理。

封装

业务中如何封装,主要是解决:命名的问题,单词很麻烦,不方便控制。

创建一个js文件,如下:

/*mark为false或者不传递代表就是session级别*/
function setSession(key,value,mark){
	//如果浏览器支持的话 localStorage
	if(window.localStorage){
		window[mark?"localStorage":"sessionStorage"].setItem("mk_"+key,value);
	}else{
		//cookie
	}
};

function getSession(key,mark){
	//如果浏览器支持的话 localStorage
	if(window.localStorage){
		return window[mark?"localStorage":"sessionStorage"].getItem("mk_"+key);
	}else{
		//cookie
	}
};

function removeSession(key,mark){
	//如果浏览器支持的话 localStorage
	if(window.localStorage){
		window[mark?"localStorage":"sessionStorage"].removeItem("mk_"+key);
	}else{
		//cookie
	}
};

/*获取ID节点*/
function dom(id){
	return document.getElementById(id);
}

页面head中引入js文件:

<head>
   <meta charset="UTF-8"> 
    <!--other start-->
        ...
    <!--other end-->
   <script type="text/javascript" src="js/util.js" ></script>
</head>

在看看简化的:

<script> 
   window.onload = function(){
      var html = getSession("username",true);
      if(html){
         dom("message").value = html;
      }
      
      dom("message").onkeydown = function(){
         setSession("username",this.value,true);
      };
      
      dom("save").onclick = function(){
         alert("保存成功");
         document.getElementById("message").value = "";
         removeSession("username",true);
      };
   };
</script>

最后看看form表单中数据的保存:

看看布局

<form action="xxx.jsp" method="post" onsubmit="return saveUser(this);">
   <p><label>用户名:<input type="text" name="username" /></label></p>
   <p><label>密码:<input type="text" name="password" /></label></p>
   <p><label>地址:<input type="text" name="address" /></label></p>
   <p>
      性别:
      <label><input type="radio" name="male" value="1"/>男</label>
      <label><input type="radio" name="male" value="0"/>女</label>
   </p>
   <p>
      爱好:
      <label><input type="checkbox" name="hobby" value="1"/>爬山</label>
      <label><input type="checkbox" name="hobby" value="2"/>看书</label>
      <label><input type="checkbox" name="hobby" value="3"/>电影</label>
   </p> 
   <button >保存</button>
</form>

效果:

blob.png

用法:

<script>
function saveUser(){
	var username = $("input[name='username']").val();
	var password = $("input[name='password']").val();
	var address = $("input[name='address']").val();
	var male = $("input[name='male']:checked").val();
	var hobbys = [];
	$("input[name='hobby']:checked").each(function(){
		hobbys.push($(this).val());
	});

	var userJson = {};
	userJson["username"] = username;
	userJson["password"] = password;
	userJson["address"] = address;
	userJson["male"] = male;
	userJson["hobbys"] = hobbys.toString(); 
        //JSON.stringify 对象转成字符串  
	setSession("userFormData",JSON.stringify(userJson),true);
        //防止提交跳转
	return false;
}

window.onload = function(){
	var cdata = getSession("userFormData",true);
	//JSON.parse 字符串转成对象
	var jsonData = JSON.parse(cdata);
	$("input[name='username']").val(jsonData.username);
	$("input[name='password']").val(jsonData.password);
	$("input[name='address']").val(jsonData.address);
	$("input[name='male'][value='"+jsonData.male+"']").prop("checked",true);
	var hobbys = jsonData.hobbys.split(",");
	if(hobbys){
	  for(var i=0;i<hobbys.length;i++){
	      $("input[name='hobby'][value='"+hobbys[i]+"']").prop("checked",true);
	  }
	}
}

注意: JSON.stringify和JSON.parse()ie678不支持

当我们使用setSession("userFormData",true);时使用的是localStorage保存本地的数据的。为false时使用的是sessionStorage保存的,用户关闭窗体再打开数据就没了。

查看本地浏览器的localStorage和sessionStorage的方法:打开浏览器按住 F12 会出现下面的窗体,就可以查看本地存储的数据了。

blob.png


 by猿码阁

>