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 ...
随机推荐
- vs code 终端字体间距过大(全角的样子)
文件-首选项-设置 将 terminal.integrated.fontFamily 配置为 Consolas, 'Courier New', monospace 或其他想要的字体,或者点击齿轮按钮重 ...
- OSError: no library called "cairo-2" was found
环境 Windows 11 python 3.8.13 (anaconda->envs) PyCharm 场景 我使用了GitHub上的第三方组件进行GUI开发,https://github.c ...
- 陈胡：Apache SeaTunnel实现 非CDC数据抽取实践
导读: 随着全球数据量的不断增长,越来越多的业务需要支撑高并发.高可用.可扩展.以及海量的数据存储,在这种情况下,适应各种场景的数据存储技术也不断的产生和发展.与此同时,各种数据库之间的同步与转化的需 ...
- AGC007E Shik and Travel 解题报告
AGC007E Shik and Travel 题目大意:\(n\) 个点的二叉树,每个点要么两个儿子,要么没有儿子,每条边有边权. 你从 \(1\) 号节点出发,走到一个叶子节点.然后每一天,你可以 ...
- lanedet项目调试记录
苦水时间:最近深度学习调代码真的是调的郁闷,每次调都是旧的问题没有解决,新的问题又冒出来了.新的好不容易解决了,旧的问题还是没有解决思路解决不了. 正文 最近找到一个实现了很多车道线检测算法的gith ...
- 一文澄清网上对 ConcurrentHashMap 的一个流传甚广的误解!
大家好,我是坤哥 上周我在极客时间某个课程看到某个讲师在讨论 ConcurrentHashMap(以下简称 CHM)是强一致性还是弱一致性时,提到这么一段话 这个解释网上也是流传甚广,那么到底对不对呢 ...
- nodeJS与MySQL实现分页数据以及倒序数据
大家在做项目时肯定会遇到列表类的数据,如果在前台一下子展示,速度肯定很慢,那么我们可以分页展示,比如说100条数据,每10条一页,在需要的时候加载一页,这样速度肯定会变快了.那么这里我给大家介绍如何在 ...
- Android （微信扫码登录） 获取微信二维码+扫码登录
话不多说 直接上菜! 一.因为是微信扫码登录,所有要在微信开放平台 微信开放平台 (qq.com) 进行注册----- 如下 1.资源中心 里面也有详细的官方讲解,里面也有demo 可以下载 2 ...
- python写个前端，这不是轻轻松松~
前端除了用js++css+html,还有没有其它办法?其实python也可以 1. 安装与基本流程 Python学习交流Q群:660193417### 安装 PyWebIO 和其他的第三方库一样使用p ...
- nextInt和nextLine以及next方法的区别
1.nextInt() 只读取整型的数据,输入读取完之后,光标仍在当前行. 2.nextLine() 扫描到一行内容,当遇见换行符时,结束扫描.一旦输入读取完毕,该方法会将光标移到下一行开始的位置. ...