zoukankan      html  css  js  c++  java
  • sessionStorage和localStorage

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

    sessionStorage用于本地存储一个会话(session)中的数据,这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储,仅仅是会话级别的存储。
    而localStorage用于持久化的本地存储,除非主动删除数据,否则数据是永远不会过期的。


     浏览器支持情况:

    浏览器的支持除了IE7及以下不支持外,其他标准浏览器都完全支持(ie及FF需在web服务器里运行),值得一提的是IE总是办好事,例如IE7、IE6中的UserData其实就是javascript本地存储的解决方案。通过简单的代码封装可以统一到所有的浏览器都支持web storage。
    要判断浏览器是否支持localStorage可以使用下面的代码:
    if(window.localStorage){ alert("浏览支持localStorage")}else{ alert("浏览暂不支持localStorage")}//或者if(typeof window.localStorage == 'undefined'){ alert("浏览暂不支持localStorage")}

    localStorage和sessionStorage都具有相同的操作方法,例如setItem、getItem和removeItem等
     用法:.setItem( key, value)
    代码示例:
    sessionStorage.setItem("key", "value"); localStorage.setItem("site", "js8.in");


    getItem获取value用途:获取指定key本地存储的值
    用法:.getItem(key)

    代码示例:
    var value = sessionStorage.getItem("key"); var site = localStorage.getItem("site");

    removeItem删除key用途:删除指定key本地存储的值
    用法:.removeItem(key)

    代码示例:
    sessionStorage.removeItem("key"); localStorage.removeItem("site");

    clear清除所有的key/value用途:清除所有的key/value
    用法:.clear()

    代码示例:
    sessionStorage.clear(); localStorage.clear();
     使用实例:

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <input type='button' onclick='set_item()' value='存值' />
    <input type='button' onclick='get_item()' value='取值' />
    <input type='button' onclick='delete_item()' value='删除' />
    <script>
    //localStorage 存值永久有效
    function set_item(){
     var user = {};
      user.name = 'Adam Li';
      user.age  = 25;
      user.home = 'China';
     localStorage.setItem('userinfo',JSON.stringify(user));
    }
    //localStorage取值
    function get_item(){
     var data = JSON.parse(localStorage.getItem('userinfo'));
     alert("name:"+data.name+" age:"+data.age+" home:"+data.home);
    }
    //localStorage删除指定键对应的值
    function delete_item(){
     localStorage.removeItem('userinfo');
     alert(localStorage.getItem('userinfo'));
    }
    </script>   

    /*                                                                                                                                                                                         

    sessionStorage使用方法请参照localStorage使用例子,实际应用要用哪个关键看你需求了,如果是要永久保存的,那么就请使用localStorage方法存取值,如果是要浏览关闭会话结束就清除缓存的,当然就得选择sessionStorage方法了

    */

  • 相关阅读:
    Leetcode 191.位1的个数 By Python
    反向传播的推导
    Leetcode 268.缺失数字 By Python
    Leetcode 326.3的幂 By Python
    Leetcode 28.实现strStr() By Python
    Leetcode 7.反转整数 By Python
    Leetcode 125.验证回文串 By Python
    Leetcode 1.两数之和 By Python
    Hdoj 1008.Elevator 题解
    TZOJ 车辆拥挤相互往里走
  • 原文地址:https://www.cnblogs.com/zhangxiaolei521/p/5310013.html
Copyright © 2011-2022 走看看