zoukankan      html  css  js  c++  java
  • 浅谈localStorage本地存储

    在年会的抽奖程序中用到了localStorage现在拿出来总结下,localStorage的相关用法。

    在年会抽奖的程序中,需要把获奖名单存储下来,年会现场没有网络,能最简单实现数据存储的方式就是,将数据存到本地。在h5标准中正好有,localStorage支持。

    兼容性

    作为前端同学最关心的问题,我们可以在caniuse网站中看到兼容性的情况。
    enter image description here
    情况还是很乐观的。

    如何使用

    localStorage.msg="hello";
    console.log(localStorage.msg);
    

    在页面中执行如山代码的时候,当你关闭页面的时候,再次打开的时候还是可以读取到 localStorage.msg 的值
    test页面

    为了能更好的看到数据是可以读取到的我们尝试下面的实例

    if (localStorage.pagecount) {
        localStorage.pagecount = 
    	    Number(localStorage.pagecount) +1;
    } else{
      localStorage.pagecount=1;
    }
    console.log(
    		'Visits ' + 
    		localStorage.pagecount + 
    		' time(s).'
    );
    

    demo页面

    如果你使用的是chrome浏览器的话,在chrome调试台中,你可以看到localStorage存储的数据。

    enter image description here

    进阶

    localStorage 可以作为一个微型的本地“数据库”来用了,那么怎么实现数据的增删改查呢?如何遍历呢?还有localStorage有哪些限制?我们逐个来看看。(一下默认 localStorage = window.localStorage

    1. 如何判断是否支持?

    if (window.localStorage) {
    	alert('This browser supports localStorage');
    } else {
    	alert('This browser does NOT support');
    }
    

    2. 有何限制?

    localStorage 的存储格式都是字符串,任何其他类型都会转成字符串存储。

    3. 如何存值(增)?

    简单的方法直接赋值

    localStorage.a = 1;//注意存储的值为'1'
    localStorage['a'] = 1;
    

    localStorage本身也有存值的方法setItem

    localStorage.setItem('a','1');
    

    4. 如何删除值(删)?

    localStorage清除键值对的方法为removeItem,如果想一次清除所以值的话用

    localStorage.removeItem('a');//清除a的值
    localStorage.clear(); // 一无所有了所有数据都会干掉
    

    5. 如何读取值(查)?

    直接获取和getItem方法

    var a1 = localStorage['a'];//获取a的值
    var a2 = localStorage.a;//获取a的值
    var a3 = localStorage.getItem('a');//获取a的值
    

    localStorage还提供了key方法用于遍历。

    function showStorage(){
    	for(var i=0;i<localStorage.length;i++){
    	    //key(i)获得相应的键,再用getItem()方法获得对应的值
    	    console.log(localStorage.key(i),
    			    localStorage.getItem(
    					    localStorage.key(i)));
    	}
    }
    
  • 相关阅读:
    异常处理
    反射4中内置函数
    property装饰器与继承
    封装
    面向对象编程
    面向对象编程
    项目开发规范
    logging模块
    22. 一个题来探查对 字符串,指针,数组三方面的关联使用方面的概念是否清晰,分析下面三个printf打印什么?
    21. 让指针数组结尾带NULL,使遍历时不依靠计算整个数组大小就可以在结尾遍历结束
  • 原文地址:https://www.cnblogs.com/yunkou/p/4279510.html
Copyright © 2011-2022 走看看