zoukankan      html  css  js  c++  java
  • 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>

  • 相关阅读:
    【转】 Pro Android学习笔记(四十):Fragment(5):适应不同屏幕或排版
    【转】 Pro Android学习笔记(三九):Fragment(4):基础小例子-续
    【转】MEAN:Nodejs+express+angularjs+mongodb搭建前端项目框架NJBlog
    handlebars中的partial
    jquery源码分析
    数据库:MySQL索引背后的数据结构及算法原理【转】
    nginx做rails项目web服务器缓存配置方法
    浏览器刷新的三种方式
    【转】火狐浏览器中firebug插件的时间线域解释
    Rails:rails链接多个数据库【转】
  • 原文地址:https://www.cnblogs.com/jyichen/p/5828686.html
Copyright © 2011-2022 走看看