zoukankan      html  css  js  c++  java
  • localStorage和sessionStorage的总结

    localStorage:没有时间限制的数据存储

    API:

    1.localStorage.setItem('name','wangwei')/localStorage.name='wangwei'存储数据

    2.localStorage.clear()清除所有存储

    3.localStorage.getItem('name')/localStorage.name读取数据

    4.localStorage.length获取个数

    5.localStorage.valueOf()获取存储的所有数据

    6.localStorage.key(0)获取某个下表的属性名

    7.localStorage.removeItem("name")删除某个属性

    8.localStorage.hasOwnProperty('name')检查是否存在某个属性

    9.localStorage.arr.toLocaleString()将存储的数组转换为本地字符串

    eg:

    var arr = ['aa','bb','cc']; // ["aa","bb","cc"]
    localStorage.arr = arr //["aa","bb","cc"]
    localStorage.arr.toLocaleString(); // "aa,bb,cc"
    "aa,bb,cc"

    10.将json数据存储在本地

    var students = {
        xiaomin: {
            name: "xiaoming",
            grade: 1
        },
        teemo: {
            name: "teemo",
            grade: 3
        }
    }
    
    students = JSON.stringify(students);  //将JSON转为字符串存到变量里
    console.log(students);
    localStorage.setItem("students",students);//将变量存到localStorage里
    
    var newStudents = localStorage.getItem("students");
    newStudents = JSON.parse(students); //转为JSON
    console.log(newStudents); // 打印出原先对象

     eg:统计用户打开该页面次数

      if(localStorage.count){
            localStorage.count=Number(localStorage.count)+1
        }else {
            localStorage.count=1
        }
    

    11.这里我们通过调用 localStorage 来访问一个 Storage 对象。首先,使用 !localStorage.getItem('bgcolor') 测试本地存储中是否包含该数据项。如果包含,则运行 setStyles() 函数,该函数使用 localStorage.getItem() 来获取数据项,并使用这些值更新页面样式。如果不包含,我们运行另一个函数 populateStorage(),该函数使用 localStorage.setItem() 设置数据项,然后运行setStyles()  

    if(!localStorage.getItem('bgcolor')) {
      populateStorage();
    } else {
      setStyles();
    }
    
    function populateStorage() {
      localStorage.setItem('bgcolor', document.getElementById('bgcolor').value);
      localStorage.setItem('font', document.getElementById('font').value);
      localStorage.setItem('image', document.getElementById('image').value);
    
      setStyles();
    }
    
    function setStyles() {
      var currentColor = localStorage.getItem('bgcolor');
      var currentFont = localStorage.getItem('font');
      var currentImage = localStorage.getItem('image');
    
      document.getElementById('bgcolor').value = currentColor;
      document.getElementById('font').value = currentFont;
      document.getElementById('image').value = currentImage;
    
      htmlElem.style.backgroundColor = '#' + currentColor;
      pElem.style.fontFamily = currentFont;
      imgElem.setAttribute('src', currentImage);
    }
    

    sessionStorage只要浏览器关闭,数据就会被清除

    API和localStorage相似  

  • 相关阅读:
    C#跨平台开源项目实战(WPF/Android/IOS/Blazor)
    WPF应用程序关闭模式(ShutdownMode)
    git修改提交记录的用户信息
    WPF摄像头使用(AForge)
    VisualStudio AppCenter 应用介绍
    EntityFrameworkCore 工具命令行总结
    FILEtoJPG-神秘文件 -更新(软件BUG及建议可以在这里反馈)
    开启网赚新方法:微信小号挂机-每天赚个早饭钱
    Android 7.0 以上保留数据去除锁屏密码的方法
    使用 GitHub+Hexo 搭建个人博客
  • 原文地址:https://www.cnblogs.com/douyaer/p/7846961.html
Copyright © 2011-2022 走看看