技术标签: 浏览器使用 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都是完全一样的。
文章浏览阅读1w次,点赞14次,收藏56次。转载自 架构师之路:从码农到架构师你差了哪些 Web应用,最常见的研发语言是Java和PHP。 后端服务,最常见的研发语言是Java和C/C++。 大数据,最常见的研发语言是Java和Python。 可以说,Java是现阶段中国互联网公司中,覆盖度最广的研发语言,掌握了Java技术体系,不管在成熟的大公司,快速发展的公司,还是创业阶段的公司,都能有立足之地。有..._web架构师
文章浏览阅读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
文章浏览阅读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前端页面将表单是否提交成功作为限制条件
文章浏览阅读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..._电脑第一道密码修改
文章浏览阅读2.5k次,点赞2次,收藏5次。迟到的文章,就当库存发出来吧~_jangow01
文章浏览阅读4k次,点赞2次,收藏15次。在MOBA游戏中,上帝视角是一个很实用的功能。_unity overlook
文章浏览阅读2.5k次,点赞2次,收藏2次。一、参考链接read chrome remote debugging documentation调出开发者选项二、设置android在安卓4.2及更新的版本中,默认情况下,【开发者选项】是隐藏的。要启用【开发者选项】,设置 -> 关于手机 -> 版本号,对着版本号点击7次。设置 -> 开发者选项 -> USB调试三、连接手机和电脑..._小米13链接mac chrome inspect
文章浏览阅读637次。树莓派的GPIO操作被抽象为文件读写,下面以一个例子来说明GPIO操作。_树莓派怎么读取gpio口上的信息
文章浏览阅读1.7k次。QNX是一种商用的遵从POSIX规范的类Unix实时操作系统,目标市场主要是面向嵌入式系统。它可能是最成功的微内核操作系统之一。QNX是一种商用的类Unix实时操作系统,遵从POSⅨ规范,目标市场主要是嵌入式系统[1]。QNX成立于1980年,是加拿大一家知名的嵌入式系统开发商。QNX的应用范围极广,包含了:控制保时捷跑车的音乐和媒体功能、核电站和美国陆军无人驾驶Crusher坦克的控制系统[2],还有RIM公司的BlackBerry PlayBook平板电脑。_车机qnx虚拟化软件系统架构
文章浏览阅读1k次,点赞20次,收藏22次。代码功能:信号发生器设计信号发生器由波形选择开关控制波形的输出,分别能输出正弦波、方汉和三角波三种波形,波形的周期为2秒(由40M有源晶振分频控制)。考虑程序的容量,每种波形在一个周期内均取16个取样点,每个样点数据是8位(数值范围:00000000~1111111)要求将D/A变换前的8位二进数据(以十进制方式)输出到数码管动态演示出来。_vhdl正弦波信号发生器
文章浏览阅读629次。Java Concurrency in Practice中对线程安全的定义:当多个线程访问一个类时,如果不用考虑这些线程在运行时环境下的调度和交替运行,并且不需要额外的同步及在调用方代码不必做其他的协调,这个类的行为仍然是正确的,那么这个类就是线程安全的。显然只有资源竞争时才会导致线程不安全,因此无状态对象永远是线程安全的 。过多的同步会产生死锁的问题,死锁属于程序运行的时_java 线程概述