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. MySQL数据库 : 查询语句,连接查询及外键约束

    查询指定字段        select 字段1,字段2 from 表名; 消除重复行(重复指的是结果集中的所有完全重复行)             select distinct 字段1,字段2.. ...

  2. 动态代理和AOP

    之前说过了我对IOC的理解,这篇文章说以下我对动态代理和基本的对AOP的理解. 所谓动态代理就是,在运行时,动态创建实现了一组指定接口的实现类对象. 比如有: interface A { } inte ...

  3. 使用python写一个最基本的mapreduce程序

    一个mapreduce程序大致分成三个部分,第一部分是mapper文件,第二个就是reducer文件,第三部分就是使用hadoop command 执行程序. 在这个过程中,困惑我最久的一个问题就是在 ...

  4. PAT (Basic Level) Practice 1023 组个最小数

    个人练习 给定数字 0-9 各若干个.你可以以任意顺序排列这些数字,但必须全部使用.目标是使得最后得到的数尽可能小(注意 0 不能做首位).例如:给定两个 0,两个 1,三个 5,一个 8,我们得到的 ...

  5. POJ:3292-Semi-prime H-numbers(艾氏筛选法拓展)

    Semi-prime H-numbers Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 10466 Accepted: 4665 ...

  6. Linux下添加桌面快捷方式

    这里用Ubuntu下BurpSuite举例 sudo vim /home/user/Desktop/burpsuite.desktop //burpsuite随意起名,系统会系动创建文件 文件写入 # ...

  7. Dapper.Extension的基本使用

    前言    上一篇随笔写了Dapper的简单的使用,这次写一下Dapper.Extension的使用,它是Dapper的简单的封装扩展,可以通过实例化的对象赋值后进行增删改的操作以及分页,但是却不能进 ...

  8. FCS校验 C语言简单实现

    static uint8 calcFCS(uint8 *pBuf, uint8 len){  uint8 rtrn = 0;  while (len--)  {    rtrn ^= *pBuf++; ...

  9. 【Linux】wc :字数统计命令

    wc :(Word Count) 统计每个传入文件中行数.词数与字节数 $ wc py_this # 三个数字分别对应行数.词数和字节数 21 144 857 py_this $ wc py_this ...

  10. 编译Code::Blocks源码 with MinGW on Win

    Build Code::Blocks源码 ---By 狂徒归来 CodeBlocks是一款非常优秀的IDE !可惜的是没有64位的版本,而且本来是轻量级别的IDE就应该够轻,能够像记事本工具一样,迅速 ...