Html5_sessionStrong和localStorage的灵活使用
谈谈这两个属性sessionStrong和localStorage是Html5新增点属性,用来记录一些数据在浏览器。
两者的区别sessionStrong存储的数据是暂时的,浏览器关掉后,存储下来的数据就会被清除。
localStorage存储的数据是长期的,浏览器关掉后,存储下来的数据还是会保存在浏览器中。
具体存储下来的数据可以在浏览器的resources中找到。
有了这两个属性我们可以做很多的事情,灵活运用,不太需要依赖cookie。
你一定要热爱你的工作,Web,只有自己喜欢的事情。才会有快乐,才会进步。
技术段:
把数据存储到浏览器:
localStorage.setItem("heName01", "周杰伦");
sessionStorage.setItem("heName02", "林俊杰");
把存储到数据拿出来用:
var heName01 = localStorage.getItem("heName");
var heName02 = sessionStorage.getItem("heName");
console.log(heName01);//周杰伦
console.log(heName02);//林俊杰
把存储到数据在浏览器中清除:
localStorage.removeItem("heName01");
sessionStorage.removeItem("heName02");
Html5_sessionStrong和localStorage的灵活使用的更多相关文章
- sessionStorage、localStorage简介
简介 技术一般水平有限,有什么错的地方,望大家指正. sessionStorage.localStorage.cookie这三个是我们在浏览器端用来存储数据的,cookie使用起来较为繁琐以后进行总结 ...
- HTML5 学习总结(三)——本地存储(localStorage、sessionStorage、WebSqlDataBase、IndexedDB)
HTML5问世以后,前端加入了一个重要的功能,便是本地存储,本地存储可分为4类: Local Storage:总的存储量有所限制,并不能提供真正的检索API,数据的生命期比窗口或浏览器的生命期长,数据 ...
- 转:localStorage 还能这么用
地址:https://iammapping.com/the-other-ways-to-use-localstorage/ localStorage 还能这么用 HTML5中 Web Storage ...
- 前端 JS,localStorage/sessionStorage、cookie 及 url 等实现前台数据共享、传输
需求是这样的:需要统计用户公司某款产品用户的回馈情况,美工给的设计多个psd,每个页面里面都有一个选择题,让用户选择自己的答案,最后经过几次选择之后在最后一个页面统一提交到后台!所以这里引出的技术需求 ...
- 如何使用T-SQL备份还原数据库及c#如何调用执行? C#中索引器的作用和实现。 jquery控制元素的隐藏和显示的几种方法。 localStorage、sessionStorage用法总结 在AspNetCore中扩展Log系列 - 介绍开源类库的使用(一) span<T>之高性能字符串操作实测
如何使用T-SQL备份还原数据库及c#如何调用执行? 准备材料:Microsoft SQL Server一部.需要还原的bak文件一只 一.备份 数据库备份语句:user master backup ...
- HTML5 localStorage本地存储
介绍 localStorage(本地存储)的使用方式.包括对存储对象的添加.修改.删除.事件触发等操作. 目录 1. 介绍 1.1 说明 1.2 特点 1.3 浏览器最小版本支持 1.4 适合场景 2 ...
- 似懂非懂的localStorage和sessionStorage
一.区别 相信很多人都见过这两个关于HTML5的新名词!HTML5种的web storage包含两种存储方式:localStorage和sessionStorage,这两种方式存储的数据不会自动发给服 ...
- SymmetricDS 快速和灵活的数据库复制
开始谈谈开源的SymmetricDS,谈谈实际使用中,遇到的一些问题和解决办法.持续更新: SymmetricDS 快速和灵活的数据库复制 实际使用 和 埋过的坑 (一)知识篇 SymmetricDS ...
- 将css和js缓存到localStorage缓存,提高网页响应速度
适用于小站点,这很极致,很快速~~ /** * Created by SevenNight on 2016/9/21 0021. * 插件功能:使用localStorage缓存js和css文件,减少h ...
随机推荐
- 【week4】课堂Scrum站立会议
项目:连连看游戏 小组名称:天天向上(旁听) 小组成员:张政 张金生 李权 武致远 已完成任务 1.本项目采用c#. 2. 初步界面. 形成一个windows下的游戏界面,每个需要消除的方块是一个bu ...
- java基础--逻辑运算符-- 002
1:int a = 10;int b = 20;boolean flag = (a == b) //falseboolean flag = (a = b) //报错,不兼容的类型 2: &, ...
- Calendar简单用法
- Java入门之:对象和类
Java对象和类 Java作为一种面向对象语言,支持以下基本概念: 多态 继承 封装 抽象 类 对象 实例 方法 重载 本节我们重点研究对象和类的概念: 对象: 对象是类的一个实例,有状态和行为.例如 ...
- BZOJ1016:[JSOI2008]最小生成树计数——题解
https://www.lydsy.com/JudgeOnline/problem.php?id=1016 现在给出了一个简单无向加权图.你不满足于求出这个图的最小生成树,而希望知道这个图中有多少个不 ...
- SPOJ8222/NSUBSTR:Substrings——题解
https://www.luogu.org/problemnew/show/SP8222#sub http://www.spoj.com/problems/NSUBSTR/ 翻译来自洛谷. 你得到一个 ...
- [Leetcode] search insert position 寻找插入位置
Given a sorted array and a target value, return the index if the target is found. If not, return the ...
- 洛谷 P4735 最大异或和 解题报告
P4735 最大异或和 题目描述 给定一个非负整数序列\(\{a\}\),初始长度为\(N\). 有\(M\)个操作,有以下两种操作类型: A x:添加操作,表示在序列末尾添加一个数\(x\),序列的 ...
- webpack开发模式和生产模式设置及不同环境脚本执行
1. webpack设置开发模式和生产模式 (1). DefinePlugin插件设置 new webpack.DefinePlugin({ 'process.env': { NODE_ENV: '& ...
- 【Android开发】范例1-绘制Android的机器人
下面这个实例通过前面学过的Paint.Canvas等2D绘画技术来实现在手机屏幕上绘制Android机器人的小实例. 具体代码实现和效果: 用来显示自定义的绘图类的布局文件 res/layout/ma ...