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)));
    	}
    }
    
  • 相关阅读:
    git 备查
    PyQt5 信号与槽机制
    Python 循环报错 'int' object is not iterable
    docker instructions命令及dockerfile实践
    shell脚本中set指令
    你知道什么是Python算法和数据结构、抽象数据和面向对象、数组和列表、链表吗?
    Python爬虫抓取B站人类高质量男性求偶视频的弹幕,康康都在讨论什么!❤️
    Python从入门到精通要掌握哪些基础知识?
    想搞个恶作剧吗? 代码丢给他,生死有命富贵在天,看我学会python用代码整蛊朋友
    妹妹画的小恐龙和我用Python画的小恐龙,你更加喜欢谁的!❤️
  • 原文地址:https://www.cnblogs.com/yunkou/p/4279510.html
Copyright © 2011-2022 走看看