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. linux防火墙的管理和策略控制

    iptables 一:IPtables防火墙的简介 IPTABLES 是与最新的 3.5 版本 Linux 内核集成的 IP 信息包过滤系统.如果 Linux 系统连接到因特网或 LAN.服务器或连接 ...

  2. Android内购订单验证 --- nodejs实现

    主代码: function AndroidPlayVerify(inappPurchaseData, inappDataSignature) { let verify = crypto.createV ...

  3. Java基础——对象和类

    将包含main方法的类称为主类. 变量的作用域是指变量可以在程序中引用的范围. 实例变量和静态变量的作用域是整个类,无论变量是在哪里声明的. 局部变量的声明和使用都在一个方法的内部. 一个类的实例变量 ...

  4. #Python编程从入门到实践#第四章笔记

    #Python编程从入门到实践#第四章笔记   操作列表 ​​​1.遍历列表 使用for循环,遍历values列表 for value in values: print(value) 2.数字列表 使 ...

  5. Aizu:0005-GCD and LCM

    GCD and LCM Time limit 1000 ms Memory limit 131072 kB Problem Description Write a program which comp ...

  6. 翻译 | “扩展asm”——用C表示操作数的汇编程序指令

    本文翻译自GNU关于GCC7.2.0版本的官方说明文档,第6.45.2小节.供查阅讨论,如有不当处敬请指正…… 通过扩展asm,可以让你在汇编程序中使用C中的变量,并从汇编代码跳转到C语言标号.在汇编 ...

  7. PHP.33-TP框架商城应用实例-后台9-商品相册-修改、删除(AJAX)

    商品相册图片删除 当商品删除时,把相册中的图片一并从硬盘和数据库中删除,根据商品id[因为每一张商品相片都会生成三张缩略图,所以删除时要将其缩略图一并删除] //钩子方法_before_delete: ...

  8. 自定义控件的getChildCount

    我真的是一步一步走过来,看过来的代码.不是能力问题,而是他们用的,我没用过,我用的他们不用.然后一句一句的问为什么,然后一句一句的去想为什么. 只有这样,才能慢慢的熟悉,东一榔头西一棒子,不是分模块再 ...

  9. 最小化安装Linux的常用配置整理

    基于安全性考虑,将服务器进行最小化安装,毕竟软件包越少,漏洞越少,相对来说就约安全,但是最小化安装会给运维带来一些问题和不便,下面是我总结的,常见的一些配置和工具的安装,仅供各位大神参考,如有新的id ...

  10. Python全栈工程师(迭代器、字节串)

    ParisGabriel                每天坚持手写  一天一篇  决定坚持几年 为了梦想为了信仰     Python人工智能从入门到精通 迭代器 Iterator: 用<&g ...