localStorage本地缓存

很多购物网站，或者APP都有展示搜索记录的功能，比如淘宝、京东等等。不知道大家有没有发现，你在自己手机上搜索的商品留下的历史记录，在别人手机上登录你的淘宝账号时发现搜索记录都没了，这是为什么？或者你还可以去试一下，在不清楚软件缓存的情况下将淘宝APP卸载，再安装，你会发现搜索的历史记录竟然还在。

这就可以说明，这种搜索历史记录的数据是存储在本地的，所以在其他手机上就没有这台手机的记录了。这种在本机缓存数据的效果，大家应该接触过一些。比如cookie、session等等，但是cookie、session等缓存的有效期限相对来说太短了。可能上午搜索商品留下的历史记录，下午再去看就没有了。

那么这个时候就引入了一个新的属性：loaclStorage

loaclStorage是HTML5中新加入的一个特性，它拓展了cookie的4K限制，localStorage中一般浏览器支持的是5M大小，这个在不同的浏览器中localStorage会有所不同。

localStorage是以键值对形式存储数据的，localStorage(obj,obj)。我们可以通过localStorage.setItem()方法来添加或者修改一个缓存：

如果Key为1的缓存存在，则会将新的Value值覆盖原有的Value值
下面是一些常用的API：

名称	作用
clear	清空localStorage上存储的数据
getItem	读取数据
hasOwnProperty	检查localStorage上是否保存了变量x，需要传入x
key	读取第i个数据的名字或称为键值(从0开始计数)
length	localStorage存储变量的个数
propertyIsEnumerable	用来检测属性是否属于某个对象的
removeItem	删除某个具体变量
setItem	存储数据
toLocaleString	将（数组）转为本地字符串
valueOf	获取所有存储的数据

我们用搭一个购物网站来试着使用localStorage

在页面的搜索栏那里，我做了一个清除缓存的按钮，和一个最近搜索的列表，接下来我们可以通过点击【搜索】按钮，将搜索栏内的值添加进缓存中。

$("#serach").click(function(){
	var Data = $("#serval").val();
	if(Data==""){
		//先判断一下搜索栏是否有值
		layer.msg("请输入关键字",{offset:'150px'});
	}else{
		//通过setItem()方法给Key为0的缓存赋值
		localStorage.setItem(0,Data);
	}
		//调用加载缓存的方法
		getStorage();
});

接下来我们就可以加载缓存，将缓存的内容添加到页面【最近搜索】栏

function getStorage(){
	//加载缓存前先将最近搜索栏清空
	$("#storage").empty();
	//判断缓存中是否有值
	if(localStorage.getItem(0)!=null){
$("#storage").append(''+ localStorage.getItem(0) +'');
	}
	else{
		$("#storage").append('无记录');
	}
}

测试一下缓存效果

就算我们刷新页面，最近搜索栏的值还是存在，除非清除浏览器的缓存。

最后就是清除缓存，可以通过removeItem()方法来删除指定Key值的缓存值，也可以直接使用clear()方法清空所有缓存

$("#remove").click(function(){
		//clear()方法清空所有缓存
		localStorage.clear();	
		//removeItem()方法删除指定Key的缓存
		localStorage.removeItem(0);
		//重新加载缓存
		getStorage();
});