html5存储方式localstorage和sessionStorage

html5中的Web Storage包括了两种存储方式：sessionStorage和localStorage。

区别：localStorage无时间限制，除非主动删除数据，否则永不过期；sessionStorage用于本地存储一个会话（session）中的数据，这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。

支持：IE7以及IE7以下不支持

sessionStorage和localStorage都具有相同的操作方法，例如setItem、getItem和removeItem等。

setItem：存储value，用法：setItem('key','value');

getItem：获取value，用法：getItem('key','value');

removeItem：删除指定key的value，用法：getItem('key','value');

clear：删清空所有的key/value，用法：getItem('key','value');

<p>本地存储</p>
    <input type="button" value='存储到localstorage' onclick="setinfo()">
    <input type="button" value="清空所有" onclick="clearAll()">
    <input type="button" value="根据key删除" onclick="deleteone()">
    <input type="button" value="获取" onclick="getinfo()">
    <input type="button" value="遍历" onclick="ergodic()">
    <p id='getvalue'></p>
    <script>
　　　　　//存储信息
        function setinfo(){
            /*if(typeof window.localStorage == 'undefined'){
                alert('浏览暂不支持localStorage')
            }*/
            if(window.localStorage){
                var Storage = window.localStorage;
                Storage.setItem("city", "北京");
                Storage.setItem("province", "四川");  
            }else{ 
                alert("浏览暂不支持localStorage") 
            }    
        }
        //删除指定key的值
        function deleteone(){
            window.localStorage.removeItem('city');
        }
        //clear清除所有的key/value
        function clearAll(){
            var localStorage = window.localStorage;
            var sessionStorage = window.sessionStorage;
            localStorage.clear();
            sessionStorage.clear(); 
        }
        //获得指定key的value
        function getinfo(){
            var getvalue = window.localStorage.getItem('province');
            alert(getvalue);
        }
        //遍历localstorage 使用key()和length
        function ergodic(){
            var storage = window.localStorage;
            //遍历localstorage 
            for (var i=0, len = storage.length; i < len; i++)
            {
            var key = storage.key(i); 
            var value = storage.getItem(key); 
            console.log("key："+key + "值：" + value); 
            }        }
　　　　//纪录刷新了多少次页面
        if(sessionStorage.visit){
            sessionStorage.visit = Number(sessionStorage.visit) + 1;
        }else{
            sessionStorage.visit = 1;
        }
        //key:visit  value: 1
        document.write('刷新了页面'+sessionStorage.visit+'次')

　　　　//利用try/catch处理Safari开启无痕浏览
　　　　//有一种情况，浏览器本身支持localStorage但是无法存入数据，例如Safari的无痕浏览模式

　　　　　　try{
　　　　　　　　window.localStorage.name=1;//能存入不会进入catch
　　　　　　}catch(e){

　　　　　　　　//不能写入
　　　　　　　　alert('请关闭无痕浏览')
　　　　　　}

</script>

 

转载于:https://www.cnblogs.com/jyichen/p/5828686.html