H5C3--sessionStorage和localStorage的使用
一.sessionStorage的使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="text" id="data">
<button id="save_data">存储到sessionStorage中</button>
<button id="get_data">获取数据</button>
<button id="del_data">删除数据</button>
<script> var save = document.getElementById('save_data') ;
var get = document.getElementById('get_data') ;
var del = document.getElementById('del_data') ; save.onclick = function () {
var data = document.getElementById('data').value;
sessionStorage.setItem('data',data);
}
get.onclick = function () {
alert(sessionStorage.getItem('data'));
}
del.onclick = function () {
sessionStorage.removeItem('data');
}
</script>
</body>
</html>
二.localStorage的使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="text" id="data">
<button id="save_data">存储到localStorage中</button>
<button id="get_data">获取数据</button>
<button id="del_data">删除数据</button>
<script> var save = document.getElementById('save_data') ;
var get = document.getElementById('get_data') ;
var del = document.getElementById('del_data') ; save.onclick = function () {
var data = document.getElementById('data').value;
localStorage.setItem('data',data);
}
get.onclick = function () {
alert(localStorage.getItem('data'));
}
del.onclick = function () {
localStorage.removeItem('data');
}
</script>
</body>
</html>
H5C3--sessionStorage和localStorage的使用的更多相关文章
- sessionStorage 和 localStorage 、cookie
sessionStorage 和 localStorage html5中web storage包括两种储存方式:sessionStorage 和 localStorage sessionStorage ...
- HTMl5的存储方式sessionStorage和localStorage详解
html5中的Web Storage包括了两种存储方式:sessionStorage和localStorage.sessionStorage用于本地存储一个会话(session)中的数据,这些数据只有 ...
- html5 sessionStorage 与 localStorage存储
sessionStorage用于本地存储一个会话(session)中的数据,这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁.因此sessionStorage不是一种持久化的本地 ...
- cookies，sessionStorage 和 localStorage区别
cookies,sessionStorage 和 localStorage 的区别 cookie是网站为了标示用户身份而储存在用户本地终端(Client Side)上的数据(通常经过加密). cook ...
- HTMl5的sessionStorage和localStorage
HTMl5的sessionStorage和localStorage html5中的Web Storage包括了两种存储方式:sessionStorage和localStorage. sessionSt ...
- sessionStorage 、localStorage 与cookie 的异同点
cookie 容量4kb,默认各种浏览器都支持,缺陷就是每次请求,浏览器都会把本机存的cookies发送到服务器,无形中浪费带宽.userdata,只有ie支持,单个容量64kb,每个域名最多可存10 ...
- 【原】灵活运用sessionStorage或者localStorage
有时,一个app中,后台并没有提供页面中对应的信息接口,需要前端在页面跳转时把某些信息带入下一个页面,一般想到用url后带参数的方法,但是有时需要带的参数过长,就不适合用这个方法了,所以用sessio ...
- HTML5中的sessionStorage和localStorage
html5中的Web Storage包括了两种存储方式:sessionStorage和localStorage. sessionStorage用于本地存储一个会话(session)中的数据,这些数据只 ...
- [Html5]sessionStorage和localStorage常见操作
摘要 [Html5]sessionStorage和localStorage的区别 索引 上篇文章简单介绍了它们的区别,已经常见的用法.那我们能通过. 或者类似dic[key]的方式访问吗?答案是当然可 ...
- [Html5]sessionStorage和localStorage的区别
摘要 有时需要在浏览器中保存一些数据,特别在app中嵌入的h5页面中,需要在webview中保存一些数据,作为客户端的数据持久化. h5中web storage有两种存储方式:sessionStora ...
随机推荐
- Deepin折腾手记之安装常用软件
1. 创建快捷方式 在创建快捷图标的文件/usr/share/applications/xx.desktop 编辑内容 [Desktop Entry] Name=VNote X-Deepin-Vend ...
- C# GDI+编程（二）
常用的绘图函数 DrawArc绘制一个弧形 示例:graphics.DrawArc(pen,,,,,,) 倒数第二个参数,表示起始度数,最后一个参数是弧形的跨越度数.比如起始度数是90,跨越度数是12 ...
- VS2005进行WORD文档开发
折腾了将近一个月的WORD文档开发终于告一段落.这件事已经很多大牛已经做过了.并且很多方法都已经非常详细,提供的资料也非常齐全.不过由于时间的久远并且较为散乱.所以我在学习时间过程中还是走了一些些弯路 ...
- NoSQL 文档数据库
- 使用springboot上传文件至nginx代理服务器
nginx配置图片服务器 server { listen 8001; server_name image.xxx.com; proxy_set_header X-Forwarded-Host $hos ...
- 修改linux命令行的提示符PS1
# If not running interactively, don't do anything [ -z "$PS1" ] && return # check ...
- mapreduce.Job: Running job: job_1553100392548_0001
这几天一直在尝试一个mapreduce的例子,但是一直都是卡在mapreduce.Job: Running job: job_1553100392548_0001,查看日志也不报错,查看每个配置文件没 ...
- Ionic 日期时间插件
1.插件安装 日期插件 时间插件 备注: 具体 查看 https://github.com/rajeshwarpatlolla/ionic-datepicker https://github.c ...
- linux学习(三)-----linux用户管理、实用指令
用户管理 基本介绍 说明: 1.Linux 系统是一个多用户多任务的操作系统,任何一个要使用系统资源的用户,都必须首先向 系统管理员申请一个账号,然后以这个账号的身份进入系统. 2.Linux 的用户 ...
- 改变swiper 按钮swiper-button-next 颜色
温馨提示:一般如果一个项目只需要一两处使用swiper时,不需要把swiper的css文件引进去,只需要把需要的几个类在swiper.css中复制出来,粘贴到自己的项目css中即可. 改变按钮颜色(红 ...