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的更多相关文章

  1. 本地存储sessionStorage 、 localStorage 、cookie整理

    sessionStorage . localStorage .cookie 的区别 sessionStorage 和 localStorage 是HTML5 Web Storage API 提供的,可 ...

  2. H5本地存储sessionStorage和localStorage的区别

    sessionStorage用于本地存储一个会话(session)中的数据,这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁.因此sessionStorage不是一种持久化的本地 ...

  3. web 本地存储 (localStorage、sessionStorage)

    web 本地存储 (localStorage.sessionStorage,cookie) localStorage(长期储存):即使关闭浏览器数据也不会删除,除非使用localStorage.cle ...

  4. [web 前端] web本地存储(localStorage、sessionStorage)

    cp from : https://blog.csdn.net/mjzhang1993/article/details/70820868 web 本地存储 (localStorage.sessionS ...

  5. web本地存储(localStorage、sessionStorage)

    web 本地存储 (localStorage.sessionStorage) 说明 对浏览器来说,使用 Web Storage 存储键值对比存储 Cookie 方式更直观,而且容量更大,它包含两种:l ...

  6. web本地存储

    Web本地存储 通过本地存储(Local Storage),web 应用程序能够在用户浏览器中对数据进行本地的存储. 在 HTML5 之前,应用程序数据只能存储在 cookie 中,包括每个服务器请求 ...

  7. 本地存储 cookie,session,localstorage( 一)基本概念及原生API

    http://www.w3school.com.cn/html5/html_5_webstorage.asp http://adamed.iteye.com/blog/1698740 localSto ...

  8. HTML5教程之本地存储SessionStorage

    SessionStorage: 将数据保存在session对象中,所谓session是指用户在浏览某个网站时,从进入网站到浏览器关闭所经过的这段时间会话,也就是用户浏览这个网站所花费的时间就是sess ...

  9. Html5 web 本地存储 (localStorage、sessionStorage)

    HTML5 提供了两种在客户端存储数据的新方法localStorage,sessionStorage sessionStorage(临时存储) :为每一个数据源维持一个存储区域,在浏览器打开期间存在, ...

随机推荐

  1. 《Redis设计与实现》- RDB持久化

    Redis RDB持久化功能可以将Redis内存中的数据库状态保存到磁盘里面,避免数据意外丢失. 1. 手动生成 RDB 文件 有两个Redis命令可以用于生成RDB文件: SAVE,该命令会阻塞Re ...

  2. python3.X中pickle类的用法(cPickle模块移除了)

    1.python3.x中移除了cPickle模块,可以使用pickle模块代替.最终我们将会有一个透明高效的模块. 2.因为存储的是对象,必须使用二进制形式写进文件 #!/usr/bin/python ...

  3. MYSQL SQL高级查询技巧

    1.UNION,EXCEPT,INTERSECT运算符 A,UNION 运算符 UNION 运算符通过组合其他两个结果表(例如 TABLE1 和 TABLE2)并消去表中任何重复行而派生出一个结果表. ...

  4. zookeeper的搭建方法

    1.创建三台虚拟机分别在虚拟机上安装Ubuntu16.04Server版的系统. 2.首先选择配置好第一台虚拟机,使用命令vim /etc/hosts对该文件进行修改 3.将zookeeper-3.4 ...

  5. Makefile (1) gcc基础

    .c(源文件) --> .i(预处理文件) -->.s(汇编文件) --> -o(目标文件) -->可执行文件 ​ .c --预处理-->.i .i --编译--> ...

  6. poj 3111 卖珠宝问题 最大化平均值

    题意:有N件分别价值v重量w的珠宝,希望保留k件使得 s=v的和/w的和最大 思路:找到贡献最大的 设当前的s为mid(x) 那么贡献就是 v-w*x 排序 ,取前k个 bool operator&l ...

  7. 使用泛型类简化ibatis系统架构

    jdk1.5的推出为我们带来了枚举.泛型.foreach循环.同步工具包等等好东西.其中,泛型的使用为我们的代码开发提供了很大的简便,简化了我们的代码. 1.设计思路 1)GenericDao泛型类提 ...

  8. Oozie 实战之 Hive

    1.编辑job.propertiers nameNode=hdfs://cen-ubuntu.cenzhongman.com:8020 jobTracker=localhost:8032 queueN ...

  9. Mysql处理海量数据时的一些优化查询速度方法【转】

    最近一段时间由于工作需要,开始关注针对Mysql数据库的select查询语句的相关优化方法.由于在参与的实际项目中发现当mysql表的数据量达到百万级时,普通SQL查询效率呈直线下降,而且如果wher ...

  10. 树莓派Raspberry Pi 3安装步骤

    一.需要的硬件 1.Raspberry Pi 3(Model B+)树莓派.购买>https://item.jd.com/29225467867.html 2.输出5V/2A的电源 3.SD卡( ...