HTML5 本地存储

HTML5 本地存储简介

Cookie

* 大小： 限制在4kb
* 带宽： cookies是随Http事务一起发送的，因此会浪费带宽
* 复杂性： 要正确操作cookies是很困难的

Web Storage

HTML5中重新提供了一种在客户端本地保存数据的功能，他就是Web Storage, 具体来说，Web Storage 又分为两种

• sessionStorage

将数据保存在session对象中。所谓session，是指用户在浏览某个网站时，从进入网站到浏览器关闭过经过的这段时间。session对象可以用来保存在这段时间内要求保存的任何数据。数据为临时保存。

• local Storage

将数据保存在客户端本地的硬件设备，数据永久保存

LocalStorage的优势与局限

优势

1. localStorage拓展了cookie的4K限制， 可以存储5M数据（不同浏览器可能不同）
2. 不占用带宽
3. 像cookies一样， 同样受同源策略限制

局限

1. 浏览器兼容性问题，在IE8以上的IE版本才支持localStorage这个属性，且不同浏览器支持不同
2. 储存类型限定为string类型，这个在对我们日常比较常见的JSON对象类型需要一些转换
3. 在浏览器的隐私模式下面是不可读取的
4. localStorage不能被爬虫抓取到

API

if(!window.localStorage){
        return false;
    }else{
           var storage = window.localStorage;
            //设置
            storage.setItem('data', JSON.stringify({
                    name: 'paopaolee',
                    age: 12
            }))

            //遍历所有值
        for(var i=0; i<window.localStorage.length;i++){
        console.log(storage.getItem(storage.key(i)));
        }
    
    }