web本地存储 sessionStorage 和 localStorage
1、sessionStorage 临时存储
为每一个数据源维持一个存储区域,在浏览器打开期间存在,包括页面重新加载。
2、localStorage 长期存储
与sessionStorage一样,但在浏览器关闭之后,数据依然会一直存在
保存数据到本地
var userInfo={
name:"张三",
age:24,
likes:"song"
}
sessionStorage.setItem("key",JSON.stringify(userInfo));
localStorage.setItem("key",JSON.stringify(userInfo));
从本地存储获取数据
var data1=JSON.parse(sessionSrorage.getItem("key"));
var data2=JSON.parse(localStorage.getItem("key"));
本地存储中删除某个保存的数据
sessionSrorage.removeItem("key");
localStorage.removeItem("key");
删除所有保存的数据
sessionSrorage.clear();
localStorage.clear();
监听本地存储的变化
Storage 发生变化(增加、更新、删除)时的 触发,同一个页面发生的改变不会触发,只会监听同一域名下其他页面改变 Storage
window.addEventListener('storage', function (e) {
console.log('key', e.key);
console.log('oldValue', e.oldValue);
console.log('newValue', e.newValue);
console.log('url', e.url);
})
web本地存储 sessionStorage 和 localStorage的更多相关文章
- 本地存储sessionStorage 、 localStorage 、cookie整理
sessionStorage . localStorage .cookie 的区别 sessionStorage 和 localStorage 是HTML5 Web Storage API 提供的,可 ...
- H5本地存储sessionStorage和localStorage的区别
sessionStorage用于本地存储一个会话(session)中的数据,这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁.因此sessionStorage不是一种持久化的本地 ...
- web 本地存储 (localStorage、sessionStorage)
web 本地存储 (localStorage.sessionStorage,cookie) localStorage(长期储存):即使关闭浏览器数据也不会删除,除非使用localStorage.cle ...
- [web 前端] web本地存储(localStorage、sessionStorage)
cp from : https://blog.csdn.net/mjzhang1993/article/details/70820868 web 本地存储 (localStorage.sessionS ...
- web本地存储(localStorage、sessionStorage)
web 本地存储 (localStorage.sessionStorage) 说明 对浏览器来说,使用 Web Storage 存储键值对比存储 Cookie 方式更直观,而且容量更大,它包含两种:l ...
- web本地存储
Web本地存储 通过本地存储(Local Storage),web 应用程序能够在用户浏览器中对数据进行本地的存储. 在 HTML5 之前,应用程序数据只能存储在 cookie 中,包括每个服务器请求 ...
- 本地存储 cookie,session,localstorage( 一)基本概念及原生API
http://www.w3school.com.cn/html5/html_5_webstorage.asp http://adamed.iteye.com/blog/1698740 localSto ...
- HTML5教程之本地存储SessionStorage
SessionStorage: 将数据保存在session对象中,所谓session是指用户在浏览某个网站时,从进入网站到浏览器关闭所经过的这段时间会话,也就是用户浏览这个网站所花费的时间就是sess ...
- Html5 web 本地存储 (localStorage、sessionStorage)
HTML5 提供了两种在客户端存储数据的新方法localStorage,sessionStorage sessionStorage(临时存储) :为每一个数据源维持一个存储区域,在浏览器打开期间存在, ...
随机推荐
- #Python编程从入门到实践#第三章笔记
列表简介 1.什么是列表 列表:由一系列按也顶顺序排列的元素组成.元素之间可以没有任何关系. 列表:用方括号[]表示,并用逗号分隔其中元素.名称一般为复数 2.访问元素 (1)列表是有序集合 ...
- 学习python第十一天,函数3 函数的序列化和反序列化
我们把变量从内存中变成可存储或传输的过程称之为序列化,序列化之后,就可以把序列化后的内容写入磁盘,或者通过网络传输到别的机器上. 反过来,把变量内容从序列化的对象重新读到内存里称之为反序列化,即unp ...
- B1005 继续(3n+1)猜想 (25分)
B1005 继续(3n+1)猜想 (25分) 卡拉兹(Callatz)猜想已经在1001中给出了描述.在这个题目里,情况稍微有些复杂. 当我们验证卡拉兹猜想的时候,为了避免重复计算,可以记录下递推过程 ...
- opencv 图像的线性混合
1 线性混合理论 g(x) = (1-α)*f1(x) + α*f2(x) 其中,α代表图像的权重 #include<iostream> #include<opencv2/openc ...
- 14,flask-sqlalchemy项目配置
基于一个flask项目,加入flask-SQLAlchemy 1.加入falsk-sqlalchemy第三方组件 from flask import Flask # 导入Flask-SQLAlchem ...
- centos 6.X 关闭selinux
SELinux(Security-Enhanced Linux) 是美国国家安全局(NSA)对于强制访问控制的实现,是 Linux历史上最杰出的新安全子系统.在这种访问控制体系的限制下,进程只能访问那 ...
- 你的第一个自动化测试:Selenium 自动化测试
前言: 让你掌握自动化测试暂时脱离手工点点点,本章节让你掌握 Selenium 如何定位.判定.操作元素(实现业务逻辑) 一. 前期准备 1.准备以下工具 1.Selenium下载地址:立即下载 2. ...
- python学习总结---面向对象2
面向对象三大特点 - 封装:既是对数据结构的封装,有是处理数据的方法的封装. - 继承:强调的父子类的关系. - 多态:不同对象调用相同的方法,有不同的响应. 类的继承 - 相关概念 - 继承:父类的 ...
- 爬虫:Scrapy8 - Item Pipeline
当 Item 在 Spider 中被收集之后,它将会被传递到 Item Pipeline,一些组件会按照一定的顺序执行对 Item 的处理. 每个 item pipeline 组件(有时也称之为“It ...
- 《大道至简》第一章 编程的精义 java伪代码形式
愚公.这位名家身上,浓缩了项目组织者.团队经理.编程人员.技术分析师等众多角色的优秀素质. 愚公移山事件分析: 原始需求:惩山北之塞,出入之迂 项目沟通方式:聚室而某曰 项目目标:毕力平险,指通豫南, ...