浏览器本地存储 sessionStorage和localStorage_iphone safari如何查看session storage-程序员宅基地

技术标签: 浏览器使用  html5  html  开发中的实用方法和函数  javascript  

一. sessionStorage和localStorage的Api是一样的,都是四种

// 保存一个数据
setItem(key,value)
// 读取一个数据
getItem(key)
// 删除一个数据
removeItem(key)
// 清空所有数据
clear()

// 注意:4个方法里面的key和value都是字符串类型的

二. 下面是具体例子:
localStorage使用:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<h2>localStorage</h2>
<button onclick="saveData()">点我保存一个数据</button>
<button onclick="readData()">点我读取一个数据</button>
<button onclick="deleteData()">点我删除一个数据</button>
<button onclick="deleteAllData()">点我清空所有数据</button>

<script>
  let p={
      name:'Bob',age:19};

  function saveData() {
      
    //注意:setItem里面的key和value都是字符串类型的,如果传入的不是字符串,
    // 就会调用 toString 方法 把它变为字符串
    window.localStorage.setItem('msg','hello');
    localStorage.setItem('msg2',666);

  //  保存对象的方式:注意: toString , JSON.stringify 和 JSON.parse 的区别
    localStorage.setItem('person',JSON.stringify(p));

  }

  function readData() {
      
    console.log(localStorage.getItem('msg2'));

    const res=localStorage.getItem('person');
    console.log(JSON.parse(res));

    const res1=localStorage.getItem('p');
    console.log(JSON.parse(res1));
  }

  function deleteData() {
      
    localStorage.removeItem('msg2');
  }

  function deleteAllData() {
      
    localStorage.clear();
  }

</script>
</body>
</html>

sessionStorage使用:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<h2>sessionStorage</h2>
<button onclick="saveData()">点我保存一个数据</button>
<button onclick="readData()">点我读取一个数据</button>
<button onclick="deleteData()">点我删除一个数据</button>
<button onclick="deleteAllData()">点我清空所有数据</button>

<script>
  let p = {
      name: 'Bob', age: 19};

  function saveData() {
      
    //注意:setItem里面的key和value都是字符串类型的,如果传入的不是字符串,
    // 就会调用 toString 方法 把它变为字符串
    window.sessionStorage.setItem('msg', 'hello');
    sessionStorage.setItem('msg2', 666);

    //  保存对象的方式:注意: toString , JSON.stringify 和 JSON.parse 的区别
    sessionStorage.setItem('person', JSON.stringify(p));

  }

  function readData() {
      
    console.log(sessionStorage.getItem('msg2'));

    const res = sessionStorage.getItem('person');
    console.log(JSON.parse(res));

    const res1 = sessionStorage.getItem('p');
    console.log(JSON.parse(res1)); // 没有key的就输出null
  }

  function deleteData() {
      
    sessionStorage.removeItem('msg2');
  }

  function deleteAllData() {
      
    sessionStorage.clear();
  }

</script>
</body>
</html>

三. 怎样查看浏览器的本地缓存呢?
打开浏览器的控制台,找到application,找到 Local Storage和 Session Storage
在这里插入图片描述

四. localStorage 和 sessionStorage的区别是什么?

localStorage 在关闭浏览器页面的时候,数据也不会清除,除非是手动调用API或者清除浏览器缓存等,数据才会消失不见。

sessionStorage 在关闭浏览器页面的时候,数据会清除。

但是他们两个的API都是完全一样的。

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/qq_45803050/article/details/120239490

智能推荐

架构师之路:从码农到架构师你差了哪些_web架构师-程序员宅基地

文章浏览阅读1w次,点赞14次,收藏56次。转载自 架构师之路:从码农到架构师你差了哪些 Web应用,最常见的研发语言是Java和PHP。 后端服务,最常见的研发语言是Java和C/C++。 大数据,最常见的研发语言是Java和Python。 可以说,Java是现阶段中国互联网公司中,覆盖度最广的研发语言,掌握了Java技术体系,不管在成熟的大公司,快速发展的公司,还是创业阶段的公司,都能有立足之地。有..._web架构师

js sort排序_sort a<b-程序员宅基地

文章浏览阅读103次。/* 排序 >号 从小到大排序 <从大到小排序 */ list.sort(function(a, b) { return a.date < b.date ? 1 : -1; })如果是简单的list就直接 return a < b ? 1 : -1;即可,如果是list里面套的map,可让list按map里面的指定字段进行排揎。..._sort a

前端设置条件限制form表单提交到后端解决方案_jsp前端页面将表单是否提交成功作为限制条件-程序员宅基地

文章浏览阅读375次。<script src="js/jquery-1.8.3.min.js" type="text/javascript"></script> <script type="text/javascript"> function checkName() { var name = document.getElementB..._jsp前端页面将表单是否提交成功作为限制条件

计算机网络sequence number,TCP协议中SequenceNumber和Ack Numbe-程序员宅基地

文章浏览阅读1k次。Sequence Numberlzyws7393074532892018-04-25Number Sequenceqq_391789932452017-09-21理解TCP序列号(Sequence Number)和确认号(Acknowledgment Number)hebbely9822017-01-14Number Sequence(规律)l25336363712902017-07-18Numb..._ack num

计算机系统启动项设置密码,电脑开机第一道密码怎么设置 - 卡饭网-程序员宅基地

文章浏览阅读5.9k次。笔记本电脑怎么进CMOS密码巧设置笔记本电脑怎么进CMOS密码巧设置 笔记本电脑为了保护用户的数据安全,往往采用加密的方式,最常见的还是CMOS密码加密技术。为了让你的重要数据更加安全,你可能需要设置不同的密码,这也就要求你记住许多密码。对于笔记本电脑用户来说,真的需要设置一道道密码关卡吗?非也非也! 一、认识与设置笔记本电脑的CMOS密码 笔记本电脑的CMOS密码大致分为超级密码(Supervi..._电脑第一道密码修改

VulnHub靶机-Jangow: 1.0.1_jangow01-程序员宅基地

文章浏览阅读2.5k次,点赞2次,收藏5次。迟到的文章,就当库存发出来吧~_jangow01

随便推点

基于Unity3D的相机功能的实现(六)—— 上帝视角(王者荣耀视角)_unity overlook-程序员宅基地

文章浏览阅读4k次,点赞2次,收藏15次。在MOBA游戏中,上帝视角是一个很实用的功能。_unity overlook

用mac的chrome浏览器调试Android手机的网页-程序员宅基地

文章浏览阅读2.5k次,点赞2次,收藏2次。一、参考链接read chrome remote debugging documentation调出开发者选项二、设置android在安卓4.2及更新的版本中,默认情况下,【开发者选项】是隐藏的。要启用【开发者选项】,设置 -> 关于手机 -> 版本号,对着版本号点击7次。设置 -> 开发者选项 -> USB调试三、连接手机和电脑..._小米13链接mac chrome inspect

树莓派GPIO简单操作_树莓派怎么读取gpio口上的信息-程序员宅基地

文章浏览阅读637次。树莓派的GPIO操作被抽象为文件读写,下面以一个例子来说明GPIO操作。_树莓派怎么读取gpio口上的信息

【汽车电子】浅谈车载系统QNX_车机qnx虚拟化软件系统架构-程序员宅基地

文章浏览阅读1.7k次。QNX是一种商用的遵从POSIX规范的类Unix实时操作系统,目标市场主要是面向嵌入式系统。它可能是最成功的微内核操作系统之一。QNX是一种商用的类Unix实时操作系统,遵从POSⅨ规范,目标市场主要是嵌入式系统[1]。QNX成立于1980年,是加拿大一家知名的嵌入式系统开发商。QNX的应用范围极广,包含了:控制保时捷跑车的音乐和媒体功能、核电站和美国陆军无人驾驶Crusher坦克的控制系统[2],还有RIM公司的BlackBerry PlayBook平板电脑。_车机qnx虚拟化软件系统架构

信号发生器设计VHDL代码Quartus仿真_vhdl正弦波信号发生器-程序员宅基地

文章浏览阅读1k次,点赞20次,收藏22次。代码功能:信号发生器设计信号发生器由波形选择开关控制波形的输出,分别能输出正弦波、方汉和三角波三种波形,波形的周期为2秒(由40M有源晶振分频控制)。考虑程序的容量,每种波形在一个周期内均取16个取样点,每个样点数据是8位(数值范围:00000000~1111111)要求将D/A变换前的8位二进数据(以十进制方式)输出到数码管动态演示出来。_vhdl正弦波信号发生器

笔记-Java线程概述_java 线程概述-程序员宅基地

文章浏览阅读629次。Java Concurrency in Practice中对线程安全的定义:当多个线程访问一个类时,如果不用考虑这些线程在运行时环境下的调度和交替运行,并且不需要额外的同步及在调用方代码不必做其他的协调,这个类的行为仍然是正确的,那么这个类就是线程安全的。显然只有资源竞争时才会导致线程不安全,因此无状态对象永远是线程安全的 。过多的同步会产生死锁的问题,死锁属于程序运行的时_java 线程概述

推荐文章

热门文章

相关标签