localStorage

本地存储与离线缓存

我们以前使用本地存储是cookie，但是使用cookie有一个明显的问题，它存储的数据是有限制的，一般情况下我们存储的数据不超过4K，webStorage能够存储的数据就很多，它包含两个内容，

localStorage,原则上数据不会消失，

sessionStorage，浏览器窗口关闭，数据就自动清除了，

Application Cache，应用缓存就是将远端文件缓存到用户的浏览器里，这个缓存不同与浏览器默认的文件单缓存，即使用户不联网或者服务器down了，用户依旧可以访问网页，比如我们做一个h5的webAPP嵌入到原生的APP里面，这是我们说的混合开发，如果用户不联网或者服务器down了，我们也希望用户能看到一些页面的效果，这样我们就需要将本地的远端资源缓存到本地里边，这就是我们通常说的离线包，有了这些离线包，即使用户不联网也可以访问离线资源了，

        localStorage.setItem('name','aaa');
        同名键值再次赋值将被覆盖
        localStorage.getItem('name');//获取localStorage中的键值
        localStorage.length;//localStorage的键值对数
        localStorage.removeItem('name');//删除数据
        localStorage.clear();//将数据全部清除

设置数据

                function setStorage(){
                    localStorage.setItem('name','aaa');
                    localStorage.setItem('age',14);
                    localStorage.setItem('gender','1');
                }
                //遍历数据
                displayData();
                function displayData(){
                    for (var i = 0; i < localStorage.length; i++) {
                        var name =  localStorage.key(i);//获取键名
                        var value = localStorage.getItem(name);//获取值
                    }
                }
                //清空数据
                function clearStorage(){
                    localStorage.clear();
                }
                //处理 storage事件
                function StorageEventHandle(){
                    console.log(
                        '数据名称:' + event.key + '\n' +
                        '以前的值:' + event.oldValue + '\n' +
                        '新的值:' + event.newValue + '\n' +
                        '链接:' + event.url + '\n' +
                        '存储:' + event.storageArea
                    )
                }
                //监听 设置数据 按钮
                var setStorageBtn = document.getElementById('set-storage');
                setStorageBtn.addEventListener('click',setStorage,false);
                //监听 清除数据 按钮
                var clearStorageBtn = document.getElementById('clear-storage');
                clearStorageBtn.addEventListener('click',clearStorage,false);
                //监听存储区域数据变化事件
                window.addEventListener('storage',StorageEventHandle,false)

显示数据

localStorage.key(0);//用key的下标来显示存入的数据键名

离线缓存

配置：<html lang="en" manifest="offline.appcache">

.appcache扩展名需要让服务器访问到，或者正确的解析

apache服务器端的conf文件夹下的mime.types文件中将text/cache-manifest 配置appcache，还需要在配置text/cache-manifest manifest，这样manifest和appcache扩展名就可以识别和使用

新建一个offline.appcache文件

                    CACHE MANIFEST
                    #1.0
                    CACHE://这些文件是缓存的
                    ./css/bootstrap.min.css
                    NETWORK://这些文件是通过服务器去浏览的
                    ./img/
                    *//除了上面CACHE以外的文件，其他资源都走服务器端，比如第一个页面和第二个页面的首页缓存起来，用户不联网可以看到一些信息，但是其他一些，比如AJAX请求，链接页面，通过在线去访问
                    FALLBACK://如果不联网了，资源可以用准备好的用来做离线资源代替显示
                    ./img/ ./img/offline.png

这样就算服务器关掉，我们依旧可以访问离线网站

设置离线数据

                <button id="set-storage" class="btn btn-primary">设置数据项目</button>
                <button id="clear-storage" class="btn btn-danger">清除数据项目</button>

                //设置数据
                function setStorage(){
                    localStorage.setItem('name','aaa');
                }
                //清空数据
                function clearStorage(){
                    localStorage.clear();
                }
                //处理 storage事件
                function StorageEventHandle(){
                    console.log(
                        '数据名称:' + event.key + '\n' +
                        '以前的值:' + event.oldValue + '\n' +
                        '新的值:' + event.newValue + '\n' +
                        '链接:' + event.url + '\n' +
                        '存储:' + event.storageArea
                    )
                }
                //监听 设置数据 按钮
                var setStorageBtn = document.getElementById('set-storage');
                setStorageBtn.addEventListener('click',setStorage,false);
                //监听 清除数据 按钮
                var clearStorageBtn = document.getElementById('clear-storage');
                clearStorageBtn.addEventListener('click',clearStorage,false);
                //监听存储区域数据变化事件
                window.addEventListener('storage',StorageEventHandle,false)

updateready

            function onUpdateReady(){
                var message = document.getElementById('update');
                message.innerHTML = '<div>应用已更新，<a href="javascript:void(0)" onclick="locatoin.reload()">刷新页面</a></div>'
            }
            window.applicationCache.addEventListener('updateready',onUpdateReady,false);
            if(window.applicationCache.status === window.applicationCache.UPDATEREADY){
                onUpdateReady();
            }

offline app

            //offline app
            //自动侦测用户是否在线还是离线
            function onlineStatus(){
                var status = document.getElementById('online-status');
                if(navigator.online){
                    status.innerHTML = '在线';
                    status.className = 'badge success';
                }else{
                    status.innerHTML = '离线';
                    status.className = 'badge';
                }
            }
            onlineStatus();
            window.addEventListener('online',onlineStatus,false);//如果用户在线，调用window的online方法
            window.addEventListener('offline',onlineStatus,false);

作用域

localStorage是靠域来作用标识的，比如用http://localhost:8000存储的数据并不能在file://直接打开的页面来获取到，还有不同的浏览器之间也是不能共享数据的

数据转换

localStorage中存储的是字符串类型，如果要存入一个对象类型,需要将其转换成字符串先

                var people = {'name':'aaa','age':14};
                localStorage.peopleObj = JSON.stringify(people);//将对象转换成字符串
                var peopelObj = JSON.parse(localStorage.peopleObj);//将字符串转换成对象

session storage

窗口关闭则清空，不同浏览器不同的页面也无法共享数据。

            //设置数据
                function setStorage(){
                    var setForm = document.getElementById('set-form');//获取元素form
                    sessionStorage.setItem('name',setForm.elements['name'].value);//找到form元素下的属性name为name的输入框的值
                    sessionStorage.setItem('gender',setForm.elements['gender'].value);
                    
                }

localStorage

推荐阅读