H5 数据存储localStorage
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<pre>
localStorage的使用：
1.存储的内容大概20mb
2.不同浏览器不能共享数据。但是在同一个浏览器的不同窗口中可以共享数据
3.永久生效，它的数据是存储在硬盘上，并不会随着页面或者浏览器的关闭而清除.如果想清除，必须手动清除 setItem(key,value):存储数据，以键值对的方式存储
getItem(key):获取数据，通过指定名称的key获取对应的value值
removeItem(key):删除数据，通过指定名称key删除对应的值
clear():清空所有存储的内容</pre>
<br>
<input type="text" id="userName"><br>
<input type="button" value="设置数据" id="setData">
<input type="button" value="获取数据" id="getData">
<input type="button" value="删除数据" id="removeData">
<input type="button" value="清空数据" id="emptyData">
<script>
document.querySelector("#setData").onclick=function(){
var name=document.querySelector("#userName").value;
/*使用localStorage存储数据*/
window.localStorage.setItem("userName",name);
}
/*获取数据*/
document.querySelector("#getData").onclick=function(){
var name=window.localStorage.getItem("userName");
alert(name);
}
/*清除数据*/
document.querySelector("#removeData").onclick=function(){
window.localStorage.removeItem("userName");
}
/* 清空数据 */
document.querySelector("#emptyData").onclick=function () {
window.localStorage.clear ();
}
</script>
</body>
</html>
H5 数据存储localStorage的更多相关文章
- 利用H5本地存储localStorage、sessionStorage
最近的业务处理上,要使用cookie缓存储一下数据,公司的cookie还搞出点问题.而用户的浏览器都是利用微信的内置,普遍支持h5的本地存储.于是利用了这个... 现代浏览器普遍开始支持H5本地存储, ...
- H5 - 本地数据存储 - localStorage.setItem
- angularjs 本地数据存储LocalStorage
1.定义服务 //=========本地存储数据服务============ app.factory('locals', ['$window', function ($window) { return ...
- Angular本地数据存储LocalStorage
//本地存储数据===================================.factory('locals',['$window',function($window){ return{ / ...
- angular.js 本地数据存储LocalStorage
定义工厂模式 factory 本地存储数据服务 app.factory('locals', ['$window', function ($window) { return { //存储单个属性 se ...
- H5本地存储详细使用教程（localStorage + JSON数据存储应用框架）
一.Web Storage教程 1.概述: 对于Web Storage来说,实际上是Cookies存储的进化版.如果了解Cookie的人几乎一看Web Storage就会用,如果你从来没用过没了解过C ...
- 客户端相关知识学习（十一）之Android H5交互Webview实现localStorage数据存储
前言 最近有一个需求是和在app中前端本地存储相关的,所以恶补了一下相关知识 webView开启支持H5 LocalStorage存储 有些时候我们发现写的本地存储没有起作用,那是因为默认WebVie ...
- 前端数据存储方案集合（cookie localStorage等）以及详解 （二）
前端数据存储方案集合(cookie localStorage等)以及详解 (二) 在之前的文章中已经介绍到了 前端存储方案中的 cookie . 但是 cookie 的存储上限是 4KB. 如果超过了 ...
- H5本地存储：sessionStorage和localStorage
作者:心叶时间:2018-05-01 18:30 H5提供了二种非常好用的本地存储方法:sessionStorage和localStorage,下面分别介绍一下: 1.sessionStorage:保 ...
随机推荐
- Vue. 之 Element获取table中选中的行
Vue. 之 Element获取table中选中的行 问题描述: 如下截图,在Table中选择数据后,然后在点击“统计”按钮,获取Table表中选择的行 解决方案: 1. 给“统计”这个按钮添加一个点 ...
- HTML5拖放API实现拖放排序的实例代码
想要拖放某个元素,必须设置该元素的 draggable 属性为 true,当该属性为 false 时,将不允许拖放.而 img 元素和 a 元素都默认设置了 draggable 属性为 true,可直 ...
- phpinfo空白
<?php phpinfo(); ?> 以上代码放入一个kk.php的文件里,但浏览器显示是空白. 原因: 检查php.ini文件里 disable_functions =后面有没有限制p ...
- 用SpannableString来设置一个textview的各种样式
通常情况下,textview 设置文本的样式很单一,为了满足某种需求可以使用SpannableString来设置文本字体大小.颜色.超链接等属性. xml就一个TextView所以就不在给出了,直接看 ...
- iOS9新系统下App Store应用上传新指南
http://www.cocoachina.com/appstore/20151010/13691.html 最近频繁收到小伙伴们的反馈,说经过前期学习已对ASO规则略有了解,但APP的提交审核是由技 ...
- 简单的requestAnimationFrame动画
html部分 <div id="test" style="width:1px;height:17px;background:#0f0;">0%< ...
- PHPCMS快速建站系列之pc:get标签的应用
GET标签使用方式如下: {pc:get sql="SELECT * FROM phpcms_member" cache="3600" page="$ ...
- this 、静态变量
/*作者:qingfeng日期:2017/2/18功能:this,静态变量(类变量)*/class Demo3_2{ public static void main(String args[]) ...
- 云原生生态周报 Vol. 3 | Java 8 ❤️ Docker
摘要: Docker Hub遭入侵,19万账号被泄露:Java 8 终于开始提供良好的容器支持:Snyk 年度安全报告出炉,容器安全问题形势空前严峻. 业界要闻 Docker Hub遭入侵,19万账号 ...
- SpringBoot-provider-JPA Not a managed type 问题分析及解决办法
spring boot jpa-java.lang.IllegalArgumentException: Not a managed type异常问题解决方法 JPA实体类没有被扫描到,导致这样的情况有 ...