• H5 本地存储(SessionStorage ,LocalStorage)


    Web Storage是HTML5引入的一个非常重要的功能,可以在客户端本地存储数据,类似HTML4的cookie,但可实现功能要比cookie强大的多,cookie大小被限制在4KB,Web Storage官方建议为每个网站5MB。

    Web Storage又分为两种:

    • sessionStorage
    • localStorage

    从字面意思就可以很清楚的看出来,sessionStorage将数据保存在session中,浏览器关闭也就没了;而localStorage则一直将数据保存在客户端本地;

    不管是sessionStorage,还是localStorage,可使用的API都相同,常用的有如下几个(以localStorage为例):

    • 保存数据:localStorage.setItem(key,value);
    • 读取数据:localStorage.getItem(key);
    • 删除单个数据:localStorage.removeItem(key);
    • 删除所有数据:localStorage.clear();
    • 得到某个索引的key:localStorage.key(index);
    复制代码
    <script type="text/javascript">
     //检查浏览器是否支持web存储
       if(typeof(Storage)!=="undefined")
    {
    // 是的! 支持 localStorage sessionStorage 对象! // 一些代码.....
    } else
    {
    // 抱歉! 不支持 web 存储。
    }
    // 设置值 sessionStorage.setItem('key_a', 1); // 取值 var key_a = sessionStorage.getItem('key_a'); console.log(key_a); // 删除 sessionStorage.removeItem('key_a'); console.log(sessionStorage.getItem('key_a'));// null sessionStorage.setItem('key_b', 1); sessionStorage.setItem('key_c', 2); // 清除所有键值 sessionStorage.clear(); console.log(sessionStorage.key_b); console.log(sessionStorage.key_c); console.log('=================='); // 设置值和取值也可以使用.符号,类似于取对象属性 // 设置值 sessionStorage.key_d = 12; // 取值 var key_d = sessionStorage.key_d; console.log(key_d); // 有个小区别,如果这个key没有了。一个返回值undefined,一个是null console.log(sessionStorage.key_null);// undefined console.log(sessionStorage.getItem('key_null'));// null console.log('==========简单演示一个存放对象的例子========'); var obj = { a : 12, b : [1,2,3,4,5], c : { x : 'a', y : ['bb', 12, 'cc', {a:1,b:2}], z : 1333 } }; sessionStorage.setItem('page', JSON.stringify(obj)); // 取值 var page = JSON.parse(sessionStorage.getItem('page')); console.log(page); // 遍历下数组 for(var i=0;i< page.b.length;i++){ console.log(page.b[i]); } // 遍历对象,通常用in for(var j in page.c){ console.log(page.c[j]) } // 删除key sessionStorage.removeItem('page'); //localStorage与sessionStorage类似 </script>
    复制代码
  • 相关阅读:
    8VC Venture Cup 2016
    8VC Venture Cup 2016
    8VC Venture Cup 2016
    HDU 5627 Clarke and MST &意义下最大生成树 贪心
    HDU 5626 Clarke and points 平面两点曼哈顿最远距离
    《花开物语》观后感
    Codeforces Round #146 (Div. 1) B. Let's Play Osu! dp
    Codeforces Round #146 (Div. 1) A. LCM Challenge 水题
    Educational Codeforces Round 7 E. Ants in Leaves 贪心
    Educational Codeforces Round 7 D. Optimal Number Permutation 构造题
  • 原文地址:https://www.cnblogs.com/2260827114com/p/6477837.html
Copyright © 2020-2023  润新知