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. pycharm快捷键一览

    编辑(Editing) Ctrl + Space 基本的代码完成(类.方法.属性)Ctrl + Alt + Space 快速导入任意类Ctrl + Shift + Enter 语句完成Ctrl + P ...

  2. Hive学习路线图

  3. 779. K-th Symbol in Grammar

    class Solution { public: int kthGrammar(int N, int K) { return helper(N, K, false); } int helper(int ...

  4. POJ 3171 区间最小花费覆盖 (DP+线段树

    Cleaning Shifts Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 4245   Accepted: 1429 D ...

  5. 笔记-HTTP及HTTPS

    笔记-HTTP及HTTPS 1.      HTTP 1.1.    简介 HTTP:hyper text transfer protocol 超文本传输协议 http常用请求方式,method ge ...

  6. python基础之多态与多态性、绑定方法和非绑定方法

    多态与多态性 多态 多态并不是一个新的知识 多态是指一类事物有多种形态,在类里就是指一个抽象类有多个子类,因而多态的概念依赖于继承 举个栗子:动物有多种形态,人.狗.猫.猪等,python的序列数据类 ...

  7. Diycode开源项目 如何解决InputMethodManager造成的内存泄漏问题

    1.内存泄漏的状况及原因 1.1.利用LeakCanary查看内存泄漏的状况 1.2.内存泄漏怎么产生的呢? InputMethodManager.mServicedView持有一个最后聚焦View的 ...

  8. Java算法求最大最小值,倒序,冒泡排序,斐波纳契数列,日历一些经典算法

    一,求最大,最小值 int[] a={21,31,4,2,766,345,2,34}; //这里防止数组中有负数,所以初始化的时候给的数组中的第一个数. int max=a[0]; int min=a ...

  9. DOS程序员手册(十三)

    744页 在DPMI 1.0下,系统会修改并重新装载所有含选择符的段寄存器,并且将所有 含有要释放的选择符的寄存器清空为0. 客户程序绝不能修改或释放该功能分配的任何描述符.Int 31h.功能010 ...

  10. jQuery easyuI datagrid 多行编辑

    在easyUI 动态绑定部分数据后,需要有部分列可以修改,研究了一天终于搞定.这是小弟的做法,望各位有好招的大侠指点. 1.添加jQuery 和jQuery easyuI的引用. 2.添加id为tt的 ...