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 ...
随机推荐
- 分布式锁的Redis实现
当我们开始开发项目部署运行时,项目规模不大,只是在一个JVM实例中运行,对同一资源的并发访问用JDK自带的锁机制就可以解决资源同时访问的问题.而随着项目的不断发展,单体应用已经无法满足日益增长的访问需 ...
- vue-cli的使用指南
vue-cli 2.0 安装vue-cli npm install -g vue-cli 创建一个项目模板 vue init <template-name> <project-nam ...
- 电脑缺失ACPI.sys
解决方法:注:U盘内需要有PE系统 拷贝一份正常的acpi.sys文件到u盘,插入电脑 > 开机时按F9 > 选中第三个USB *** > 回车进入PE系统,将acpi.sys放入图 ...
- ElasticSearch入门之彼行我释（四）
散仙在上篇文章中,介绍了关于ElasticSearch基本的增删改查的基本粒子,本篇呢,我们来学下稍微高级一点的知识: (1)如何在ElasticSearch中批量提交索引 ? (2)如何使用高级查询 ...
- 2018-8-10-win10-uwp-手把手教你使用-asp-dotnet-core-做-cs-程序
title author date CreateTime categories win10 uwp 手把手教你使用 asp dotnet core 做 cs 程序 lindexi 2018-08-10 ...
- Numpy数据的操作 * dot() multiply() 的区别
使用numpy时,跟matlab不同: 1.* dot() multiply() 对于array来说,* 和 dot()运算不同 *是每个元素对应相乘 dot()是矩阵乘法 对于matrix来说,* ...
- Django项目：CRM(客户关系管理系统)--80--70PerfectCRM实现CRM业务流程(bpm)课程排行分页
# coursetop_views.py # ————————64PerfectCRM实现CRM课程排名详情———————— #————班级学生详情——#计算#{学员ID:分数}——#计算 #{学员I ...
- PAT甲级——A1028 List Sorting
Excel can sort records according to any column. Now you are supposed to imitate this function. Input ...
- 初探.NET CORE WEB API（RESTful风格）
前面有4篇系列博客 (一)Asp.net web api中的坑-[找不到与请求 URI匹配的 HTTP 资源] (二)Asp.net web api中的坑-[http get请求中的参数] (三)As ...
- webServices学习二（小试牛刀。jdk 方式发布一个应用）
一.前提 1.用Jdk1.6.0_21以后的版本发布一个WebService服务. 2.与Web服务相关的类,都位于javax.jws.*包中. 1.主要类有: 1.@WebService - 它是 ...