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

在页面的搜索栏那里，我做了一个