LocalStorage

LocalStorage

什么是LocalStorage

在HTML5中，新加入了一个localStorage特性，这个特性主要是用来作为本地存储来使用的，解决了cookie存储空间不足的问题(cookie中每条cookie的存储空间为4k)，localStorage中一般浏览器支持的是5M大小，这个在不同的浏览器中localStorage会有所不同。

LocalStorage的优势和局限

LocalStorage优势

1、localStorage拓展了cookie的4K限制
2、localStorage会可以将第一次请求的数据直接存储到本地，这个相当于一个5M大小的针对于前端页面的数据库，相比于cookie可以节约带宽，但是这个却是只有在高版本的浏览器中才支持的

localStorage的局限

1、浏览器的大小不统一，并且在IE8以上的IE版本才支持localStorage这个属性
2、目前所有的浏览器中都会把localStorage的值类型限定为string类型，对于比较常见的JSON对象类型需要转换
3、localStorage在浏览器的隐私模式下面是不可读取的
4、localStorage本质上是对字符串的读取，如果存储内容多的话会消耗内存空间，会导致页面变卡
5、localStorage不能被爬虫抓取到

localStorage的浏览器支持情况

IE	Firefox	Opera	Chrome	Safari	iPhone	Android
8.0+	3.0+	10.5+	4.0+	4.0+	2.0+	2.0+

LocalStorageAPI

js的window对象调用localStorage属性

localStorage的使用遵循同源策略的，所以不同的网站是不能直接共用相同的localStorage

var storage = window.localStorage

LocalStorage的赋值(定义)

定义localStorage中key的值为value
1. storage.key=value
2. storage['key']=value
3. storage.setItem('key',value)

LocalStorage的输出(获取)

输出localStorage中的key保存的值
1. storage.key
2. storage['key']
3. storage.getItem('key')
4. storage.key(index)//获得指定索引的key值
    for(var i in store){
        storage.key(i);
    }

LocalStorage的删除操作

1 清空所有key：
storage.clean();
2 删除单个key：
storage.removeItem("key");

LocalStorage存取JSON数据

• localStorage只支持string类型的存储故而JSON数据必须转换成字符串再存进localStorage

• 从localStorage取出的是字符串要解析成JSON数据

• JSON存入localStorage中，则localStorage会自动将localStorage转换成为字符串形式

```
    JSON.stringify(json数据)//json数据转成字符串
    JSON.parse(字符串)//字符串转成json数据
```