vue浏览器缓存问题_vue兼容浏览器能兼容到几

vue浏览器缓存问题_vue兼容浏览器能兼容到几一.客户端缓存:localStorage/sessionStoragelocalStorage-持久化的本地存储,除非主动删除数据,否则数据永远不会过期.sessionStorage-本地存储一个会话(session)中的数据,当页面关闭,数据将清除.存储大小约为5M.二.localStorage(sessionStorage)基本用法1.设置setItem(key,value)

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE使用 1年只要46元 售后保障 童叟无欺

一.客户端缓存:localStorage/sessionStorage

localStorage -持久化的本地存储,除非主动删除数据,否则数据永远不会过期.

sessionStorage-本地存储一个会话(session)中的数据,当页面关闭,数据将清除.存储大小约为5M.


二.localStorage(sessionStorage)基本用法

1.设置

setItem(key,value)                  
localStorage.setItem('a','123');

2.1获取

getItem(key);                                        
localStorage.getItem('a'); //返回123

2.2遍历获取

var storage=window.localStorage;
            storage.a1=1;
            storage.setItem("a2",2);
            for(var i=0;i<storage.length;i++){
                var key=storage.key(i);
                console.log(key);
            }

3.删除

removeItem(key);                                    
localStorage.removeItem('a');  //删除指定缓存
localStorage.clear();  //清空所有本地缓存
注意:

①localStroage返回的所有数据都是字符串.当缓存的数据为json时,需要用以下方法转换:

JSON.stringify()用于从一个对象解析出字符串;
JSON.parse()用于从一个字符串中解析出json对象。
var jsonData = {
  
  'name': '小红', 'age': 18}; // 定义一个JSON对象
var str_jsonData = JSON.stringify(jsonData);
console.log(typeof(str_jsonData)); // string
localStorage.setItem('localData', str_jsonData); // 存储字符串数据到本地
var getLocalData = localStorage.getItem('localData'); // 读取字符串数据
console.log(typeof(getLocalData)); // string
var jsonObj = JSON.parse(getLocalData);
console.log(typeof(jsonObj)); // obj
console.log(jsonObj.age); // 18

②sessionStorage用法与localStroage一样,只不过它们的作用域不一样;sessionStorage是会话级别的存储,关闭页面,数据将被清除.


三.项目应用

1.将用户登入信息存入sessionStorage

......
  const validateUsername = (rule, value, callback) => {
      if (!isvalidUsername(value)) {
        callback(new Error('请输入正确的用户名'))
      } else {
        //登入成功后,缓存用户登入信息
        sessionStorage.setItem('username', value)     //将用户名缓存
        var time = new Date().toLocaleDateString() + new Date().toLocaleTimeString()
        sessionStorage.setItem('t', time)             //将登入时间缓存
        callback()
      }
    }
......

2.获取用户登入信息

......
 handleGetUser() {
      var uname = sessionStorage.getItem('username')
      var time = sessionStorage.getItem('t')
      alert('登入用户名为:' + uname + ' ' + '登入时间为:' + time)
    },
......

3.清除缓存

...... handleClear() { localStorage.clear() //清除所有本地缓存 sessionStorage.clear() //清除当前会话所有缓存 sessionStorage.removeItem('username') //清除指定缓存 alert('清除成功') }, ......

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/179067.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • Linux WIFI优先连接5G频段「建议收藏」

    Linux WIFI优先连接5G频段「建议收藏」最近遇到一个项目,要求树莓派无线优先连接5G,目前测试了一个方法,先记录下来,测试下来是有用的。现场无线网络知识2.4G和5G双频,SSID和密码都是相同的,树莓派在这个环境中,优先连接2.4G网络。由于2.4G网络干扰问题,网络通讯不稳定,因此需要树莓派优先连接到5G网络。有查到通过修改wpa_supplicant.conf文件中,定义frep_list的频点值,可以修改单独连接到5WIFI.后来经过测试,将5G频段排序到2.4G频段之前,无线会优先连接5G网络,如果5G网络不可用,也可以连接到

    2022年10月20日
  • 函数去抖(debounce)& 函数节流(throttle)总结

    函数去抖(debounce)& 函数节流(throttle)总结//todo

  • 布隆过滤器原理简介视频_布隆过滤器误判怎么办

    布隆过滤器原理简介视频_布隆过滤器误判怎么办目录1.布隆过滤器简介2.布隆过滤器的实现思路3.布隆过滤器的公式4.实际应用场景1.布隆过滤器简介布隆过滤器(BloomFilter)是由一个很长的bit数组和一系列哈希函数组成的。本质上是一种数据结构,比较巧妙的概率型数据结构。它的特点是高效地插入和查询,并且根据查询结果可以知道某样东西一定不存在或者可能存在。相比于传统的List、Set、Map等数据结构,它更高效、占用空间更少,但是缺点是其返回的结果是概率性的,而不是确切的,同时布隆过滤器还有一个缺陷就是数据只..

  • 2010年度 中国WEB应用防火墙厂家和产品大全

    2010年度 中国WEB应用防火墙厂家和产品大全中国WEB应用防火墙厂商与产品大全排名依据根据“厂家名称”的首字母拼音,无特殊含义。更新日期:2010年03月23日发布网站:www.cnciso.com、www.youxia.org联系人QQ:55984512、175589438厂家名称产品名称公司网址联系电话北京绿盟科技绿盟WEB应用防火墙www.nsfocus.com400-818-6868北京瑞达时代科技有限公…

  • Linux下安装mysql-8.0.21

    Linux下安装mysql-8.0.21转载原文https://www.jianshu.com/p/4587e9429702下面记录了我在Linux(Centos7)环境下安装Mysql的完整过程,实操记录,绝非水文,如有错误或遗漏,欢迎指正。安装过程中务必保证文件路径的前后统一,否则可能会导致不可预期的结果,推荐直接使用文中的命令进行操作。一安装前准备1、检查是否已经安装过mysql,执行命令[root@localhost/]#rpm-qa|grepmysql从执行结果,可以看出我们已经安装了

  • Android应用程序开发「建议收藏」

    Android应用程序开发「建议收藏」Android应用程序开发 第一章Android应用初体验1.1应用基础activity是AndroidSDK中Activity类的一个具体实例,负责管理用户与信息屏的交互。应用的功能是通过编写一个个Activity子类来实现的。布局定义了一系列用户界面对象以及它们显示在屏幕上的位置。组成布局的定义保存在XML文件中。…

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号