数据缓存之 storage 和 cookie 及封装

不管是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

使用:

  #message{width:500px;height:120px;resize: none;padding:10px;}


保存说说

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

封装

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

创建一个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文件：

   <meta charset="UTF-8"> 

    

        ...

    

   <script type="text/javascript" src="js/util.js" >

在看看简化的：

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

看看布局：

   
用户名：
   
密码：
   
地址：
   

      性别：
      男
      女
   
   

      爱好：
      爬山
      看书
      电影
   
 
   保存

效果：

用法：