HTML 本地缓存
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="UTF-8" />
5 <title>localStorage</title>
6 <!--
7 webStorage
8 1.存储内容大小一般支持5MB左右（不同浏览器可能还不一样）
9 2.浏览器端通过window.sessionStorage 和 window.localStorage属性来实现本地存储机制。
10 3.相关API:
11 a.xxxStorage.setItem('key', 'value');
12 该方法接收一对键值对作为参数，存储到本地，如果键名存在，则更新其对应的值。
13 b.xxxStorage.getItem('key');
14 该方法接收一个键名作为参数，返回键所对应的值。
15 c.xxxStorage.removeItem('key');
16 该方法接收一个键名作为参数，把键所对应的值从存储中删除。
17 d.xxxStorage.clear();
18 该方法会清空存储中所有数据。
19 4.备注
20 a.SessionStorage存储的内容会随着浏览器串口关闭而消失。
21 b.LocalStorage存储的内容，需要手动清楚才会消失。
22 c.xxxStorage.get(xxx)如果xxx对应的value获取不到，则会返回null。
23 d.JSON.parse(null)的结果依然是null。
24 -->
25 </head>
26 <body>
27 <h2>localStorage</h2>
28 <button onclick="saveData()">点我保存一个数据</button>
29 <button onclick="readData()">点我读取一个数据</button>
30 <button onclick="deleteData()">点我删除一个数据</button>
31 <button onclick="deleteAllData()">点我删除所有数据</button>
32 <script type="text/javascript">
33 let p = {name:'张三',sex:'男',age:20};
34 function saveData(){
35 localStorage.setItem('msg', 'hello!!!');
36 localStorage.setItem('msg2', 666);
37 localStorage.setItem('person', JSON.stringify(p));
38 }
39 function readData(){
40 console.log(localStorage.getItem('msg'));
41 console.log(localStorage.getItem('msg2'));
42 let person = localStorage.getItem('person');
43 console.log(JSON.parse(person));
44 }
45 function deleteData(){
46 localStorage.removeItem('msg2');
47 }
48 function deleteAllData(){
49 localStorage.clear();
50 }
51 </script>
52 </body>
53
54 </html>
HTML 本地缓存的更多相关文章
- HTML5权威指南--Web Storage,本地数据库,本地缓存API,Web Sockets API,Geolocation API(简要学习笔记二)
1.Web Storage HTML5除了Canvas元素之外,还有一个非常重要的功能那就是客户端本地保存数据的Web Storage功能. 以前都是用cookies保存用户名等简单信息. 但是c ...
- 微信小程序之本地缓存(十)
[未经作者本人同意,请勿以任何形式转载] 目前,微信给每个小程序提供了10M的本地缓存空间(哎哟妈呀好大) 有了本地缓存,你的小程序可以做到: 离线应用(已测试在无网络的情况下,可以操作缓存数据) 流 ...
- HTML5本地缓存数据
//HTML5本地缓存数据 function putObj(key, data) { if (!!window.localStorage) { var obj = { "key": ...
- iOS //清除本地缓存
//清除本地缓存 -(void)clearCache{ dispatch_async(dispatch_get_global_queue(DISPATCH_QUEUE_PRIORITY_DEFAULT ...
- Java8简单的本地缓存实现
原文出处:lukaseder Java8简单的本地缓存实现 这里我将会给大家演示用ConcurrentHashMap类和lambda表达式实现一个本地缓存.因为Map有一个新的方法,在 ...
- Java学习之ConcurrentHashMap实现一个本地缓存
ConcurrentHashMap融合了Hashtable和HashMap二者的优势. Hashtable是做了线程同步,HashMap未考虑同步.所以HashMap在单线程下效率较高,Hashtab ...
- iOS五种本地缓存数据方式
iOS五种本地缓存数据方式 iOS本地缓存数据方式有五种:前言 1.直接写文件方式:可以存储的对象有NSString.NSArray.NSDictionary.NSData.NSNumber,数据 ...
- OutputCache 如何使用本地缓存 【转】
注意!ASP.NET MVC 3 的一个 OutputCache 问题 在用 ASP.NET MVC 3 重写博客园网站首页时,特地留意了一下这个缓存问题,通过这篇博文分享一下. 在 ASP.NE ...
- 如何查看与刷新DNS本地缓存
如何查看与刷新DNS本地缓存 一.查看DNS本地缓存 在cmd窗口输入:ipconfig/displaydns 二.刷新DNS本地缓存 在cmd窗口输入:ipconfig/flushdns 之后输入: ...
- 第七章 企业项目开发--本地缓存guava cache
1.在实际项目开发中,会使用到很多缓存技术,而且数据库的设计一般也会依赖于有缓存的情况下设计. 常用的缓存分两种:本地缓存和分布式缓存. 常用的本地缓存是guava cache,本章主要介绍guava ...
随机推荐
- intelij idea 好用的插件
简介 记录一下平时使用的插件 Foldable ProjectView 隐藏目录或文件 One Dark theme 主题比较好用 Gitmoji Plus: Commit Button 在 comm ...
- （原创）[C#] MEF 主程序与插件加载不同版本的DLL
一.前言 MEF(Managed Extensibility Framework),是轻量级的插件框架.使用简单,功能强大.详细介绍见MSDN,本文不再赘述. 在使用MEF时,会遇到这样一种场景: 主 ...
- 【多线程】线程优先级 Priority
线程优先级 Priority Java提供一个线程调度器来监控程序中启动后进入就绪状态的所有线程,线程调度 器按照优先级决定应该调度哪个线程来执行. 线程的优先级用数字表示,范围从1~10. Thre ...
- Spring Security之短信登录
实现短信验证码登录 前面实现了 用户名+密码 的登录方式,现在实现一下短信验证码登录. 开发短信验证码接口 短信验证码和图形验证码类似,用户从手机短信得到验证码和从图片得到验证码类似. 校验短信验证码 ...
- 好客租房9-jsx的学习目标
1能够知道什么是jsx 2能够使用jsx创建react元素 3能够在jsx使用javascript表达式 4能够使用jsx的条件渲染和列表渲染 5能够给jsx添加样式 jsx的基本使用 jsx中使用j ...
- 04 Springboot 格式化LocalDateTime
Springboot 格式化LocalDateTime 我们知道在springboot中有默认的json解析器,Spring Boot 中默认使用的 Json 解析技术框架是 jackson.我们点开 ...
- 01C语言基础(二)
Day07 笔记 指针和函数: 栈 帧: 当函数调用时,系统会在 stack 空间上申请一块内存区域,用来供函数调用,主要存放 形参 和 局部变量(定义在函数内部). 当函数调用结束,这块内存区域自动 ...
- STM32 CubeMx使用教程
一.STM32CubeMX 简介 STM32CubeMX 是 ST 意法半导体近几年来大力推荐的STM32 芯片图形化配置工具,目的就是为了方便开发者, 允许用户使用图形化向导生成C 初始化代码,可以 ...
- 论文解读（AGE)《Adaptive Graph Encoder for Attributed Graph Embedding》
论文信息 论文标题:Adaptive Graph Encoder for Attributed Graph Embedding论文作者:Gayan K. Kulatilleke, Marius Por ...
- 从数字化概念到落地，都说是一道坎，JNPF能为企业带来什么呢？
数字经济席卷全球推动产业转型是必然趋势,人类社会正在数字化大潮中发生深刻变革,数字化越来越成为推动经济社会发展的核心驱动力.企业正处于数字经济大潮的风口浪尖,故企业经验决策者应深刻认识数字化转型对于企 ...