web存储机制localStorage和sessionStorage

https://www.cnblogs.com/yaoyuqian/p/7901052.html

web存储包括两种:sessionStorage 和 localStorage(都是限定在文档源级别,非同源文档间无法共享)

1.sessionStorage 数据放在服务器上(IE不支持)严格用于一个浏览器会话中存储数据,数据在浏览器关闭后会立即删除
2.localStorage 数据在客户端(低版本IE ( IE6, IE7 ) 不支持,并且不支持查询语言)跨会话持久化地存储数据localStorage与sessionStorage的区别:localStorage只要在相同的协议、相同的主机名、相同的端口下,即同源就能读取/修改到同一份localStorage数据。sessionStorage比localStorage更严苛一点,除了协议、主机名、端口外,还要求在同一窗口(也就是浏览器的标签页)下。用法相同:(以sessionStorage为例)1.添加:sessionStorage.setItem(key, value);//value可以任何数据类型2.获取: sessionStorage.getItem(key); 3.删除: sessionStorage.removeItem(key);//删除该存储对象中key的键值对 4.清除所有: sessionStorage.clear();//清除该存储对象中所有的键值对 5.检索(查): sessionStorage.key();//检索key[n]的值 实例:
复制代码
    localStorage.setItem("x",1);//以"x"的名字存储一个数值localStorage.x = 1;//直接向 Web 存储对象添加键/值对localStorage.getItem("x");//获取数值localStorage.x;//直接从 Web 存储对象中检索键/值对localStorage.removeItem("x");//删除“x”项。//removeItem是唯一通用的能删除单个名值对的方式。(因为IE8不支持delete操作符)localStorage.clear();//全部删除。唯一能删除存储对象中所有名值对的方式//将一个数组存储为字符串var myArray = new Array('First Name', 'Last Name', 'Email Address');localStorage.formData = JSON.stringify(myArray);//检索数组的字符串版本并将它转换成一个可用的 JavaScript 数组var myArray = JSON.parse(localStorage.formData);
复制代码
 还有一种更实用的存取方法:
复制代码

var obj = {
name: 'doctorhou',
describe: '高大、威猛、帅气'
};
localStorage.setItem('test', JSON.stringify(obj));
var getObj = JSON.parse(localStorage.getItem('test'));

    
// 存储数据发生改变的时候(对应事件):window.onstorage    
复制代码

示例:

复制代码
  <body><h3>这是我的用户名和密码</h3><div id="username"></div><div id="password"></div><script>// 1.获取对象var username = document.getElementById('username');var password = document.getElementById('password');// 2.将存储的数据写入到两个div中username.innerHTML = localStorage.getItem('username');password.innerHTML = localStorage.getItem('password');// 3.做stroage的事件监听window.onstorage = function(e) {// StorageEvent// console.log(e);// console.log(e.key);修改的键// console.log(e.oldValue);原来的值// console.log(e.newValue);新值username.innerHTML = e.newValue;}</script></body>

转载于:https://www.cnblogs.com/beimingbingpo/p/9603563.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/465045.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

“元宇宙” 是什么东西?

最近元宇宙的概念很火&#xff0c;所以转发一篇文章给大家看看。每当一个新东西出来的时候&#xff0c;有的人觉得这个是个好东西&#xff0c;也有人嗤之以鼻&#xff0c;觉得这个就是用来割韭菜的。就拿比特币来说&#xff0c;比特币有什么价值&#xff1f;他的价值无非就是操…

分布式系统服务器要求,浅谈分布式系统

分布式系统的由来软件系统的架构一直以来随着技术的发展和市场的需求进行着不断的演进。最初&#xff0c;各行业业务相对比较简单&#xff0c;对系统的要求也不高&#xff0c;软件系统的架构均采用单一应用架构&#xff0c;此时单台服务器即可满足系统的要求。之后&#xff0c;…

OCP Java 自测

一个朋友准备去考OCP Java认证&#xff0c;即原来的SCJP。心血来潮也想测测自己什么水平。找了本McGraw.Hill.OCP.Java.SE.6.Programmer.Practice.Exams&#xff0c;开盘就是两套自测题。14个题目&#xff0c;给了42分钟&#xff0c;按书中说法是过了8个就可以去考了。掐上秒表…

内核该怎么学?Linux进程管理工作原理(代码演示)

前言&#xff1a;Linux内核里大部分都是C语言。建议先看《Linux内核设计与实现(Linux Kernel Development)》,Robert Love&#xff0c;也就是LKD。Linux是一种动态系统&#xff0c;能够适应不断变化的计算需求。Linux计算需求的表现是以进程的通用抽象为中心的。进程可以是短期…

如果访问云服务器上的文件,如果访问云服务器上的文件

如果访问云服务器上的文件 内容精选换一换WinSCP工具可以实现在本地与远程计算机之间安全地复制文件。与使用FTP上传代码相比&#xff0c;通过 WinSCP 可以直接使用服务器账户密码访问服务器&#xff0c;无需在服务器端做任何配置。通常本地Windows计算机将文件上传至Linux服务…

int *p = *******a是什么鬼?

这是在朋友圈里面看到有人调侃的一个C语言题目&#xff0c;这里拿出来分享给大家看看。1我们知道int a 120; int* p &a;这样我们可以给指针p赋值。指针很多初学者学习的时候会觉得一脸懵逼&#xff0c;我们只要明白几个关键的东西&#xff0c;会让我们对指针理解更深入一…

你见过的MCU最高GPIO翻转频率是多少?

大家好&#xff0c;我是痞子衡&#xff0c;是正经搞技术的痞子。今天痞子衡给大家介绍的是i.MXRT1010上的普通GPIO与高速GPIO极限翻转频率。上一篇文章 《聊聊i.MXRT1xxx上的普通GPIO与高速GPIO差异及其用法》&#xff0c;痞子衡从原理上介绍了 i.MXRT1xxx 系列里普通 GPIO 和 …

django中的admin组件之自定义组件的增删改查的完善

昨天我们将自定义列放在类我们自定义的Bookconfig配置类内&#xff0c;但是这样就写死了&#xff0c;因为当我们访问publish表的时候应该也有这样的自定义列&#xff0c;所以我们应该将我们的自定义列放在默认的配置表里面。应该怎么做&#xff1f; 当我们的自定义列挪到默认配…

“制造商和技术支持商”

1.用优化工具。 2.system32中的OEMINFO.ini和OEMLOGO.bmp文件 转载于:https://blog.51cto.com/honglingjin2011/537680

青春是一列不再回头的火车…

高中那年&#xff0c;我表姐对我说&#xff1a;“不要老想着出去打工赚钱&#xff0c;好好读书&#xff0c;将来肯定有用&#xff0c;也不要想着现在日子长得很&#xff0c;等你像我这样结婚生子后&#xff0c;一天一眨眼就过完了。”当时听了没有多大感觉&#xff0c;如今深以…

我和周立功的聊天

算起来&#xff0c;我和周工认识也有7年了&#xff0c;7年前我在中兴&#xff0c;偶然一次加了周工的微信&#xff0c;有一次年末&#xff0c;周立功在推广他们的示波器&#xff0c;广哥拉我进周立功的示波器技术支持群微信群&#xff0c;说是周工要给大家发红包。那时候&#…

Python 37 进程池与线程池 、 协程

一&#xff1a;进程池与线程池 提交任务的两种方式&#xff1a; 1、同步调用&#xff1a;提交完一个任务之后&#xff0c;就在原地等待&#xff0c;等任务完完整整地运行完毕拿到结果后&#xff0c;再执行下一行代码&#xff0c;会导致任务是串行执行 2、异步调用&#xff1a;提…

在腾讯做嵌入式是怎么样的

昨天发朋友圈&#xff0c;是我帮忙同学拍的几张照片&#xff0c;自己觉得拍的不错&#xff0c;点赞的人还挺多的&#xff0c;就想着聊聊在腾讯做嵌入式软件开发的情况。我面试的BSP驱动开发工程师&#xff0c;入职后也从事这方面的事情&#xff0c;但是并不仅仅是BSP驱动。现在…

NFS无法启动根文件系统的解决

为了调试驱动&#xff0c;整了一天的NFS启动根文件系统出了各种问题&#xff0c;后来还是一一解决&#xff0c;不过还不太完美&#xff0c;因为不能使用交换机&#xff0c;我只能用PC和目标板直连&#xff0c;导致我上网很麻烦 无法挂载问题一&#xff1a; IP-Config: Cannot a…

聊聊身边的嵌入式,为什么老司机都爱后视镜

为什么老司机都爱后视镜有句话形容我们老司机的成长过程&#xff0c;叫&#xff1a;一年虎&#xff0c;二年狼&#xff0c;三年变成小绵羊。如果你不懂这句话的意思&#xff0c;证明你还不是一个合格的老司机。如果没和别人发生过亲(Gua)密(Ceng)接(Shi)触(Gu)&#xff0c;算得…

HDU 2187 悼念512汶川大地震遇难同胞——老人是真饿了

http://acm.hdu.edu.cn/showproblem.php?pid2187 Problem Description时间&#xff1a;2008年5月16日&#xff08;震后第4天&#xff09;地点&#xff1a;汶川县牛脑寨人物&#xff1a;羌族老奶奶【转载整理】牛脑寨是一个全村600多人的羌族寨子&#xff0c;震后几天&#xff…

第六次周赛

失望…… B题其实很简单&#xff0c;完全有能力出&#xff0c;我和luyi陷在我一个错误的树DP模型中…… 其实就是几个简单的组合数&#xff0c;谁可以都会的问题。 PROBLEM B 1 #include <iostream>2 #include <algorithm>3 #include <cstring>4 #include &l…

博主日常工作中使用的shell脚本分享

前言&#xff1a;今天给大家分享一篇在我工作中常用的一个shell脚本&#xff0c;里面有一些我们常用到的shell操作。该脚本用于本地电脑和服务器交互上&#xff0c;实现以下功能&#xff1a;自动拉取自己个人电脑上的源码到服务器上yocto包的源码文件夹。自动运行compile 、str…

JSON数据提取

JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式&#xff0c;它使得人们很容易的进行阅读和编写。同时也方便了机器进行解析和生成。JSON在数据交换中起到了一个载体的作用&#xff0c;承载着相互传递的数据。JSON适用于进行数据交互的场景&#xff0c;比如网站前…

陆奇给工程师们的5个建议

大家好&#xff0c;我是写代码的篮球球痴今天分享的文章是陆奇以前在百度一次内部演讲给工程师们提的5点要求&#xff0c;个人觉得对很多人非常有益&#xff0c;大家可以耐心一读。至于陆奇是谁&#xff0c;可以直接搜索&#xff0c;借微软CEO斯蒂芬鲍尔默对他的评价 : 陆奇集资…