web 本地存储 (localStorage、sessionStorage)

说明

对浏览器来说,使用 Web Storage 存储键值对比存储 Cookie 方式更直观,而且容量更大,它包含两种:localStorage 和 sessionStorage

  1. sessionStorage(临时存储) :为每一个数据源维持一个存储区域,在浏览器打开期间存在,包括页面重新加载

  2. localStorage(长期存储) :与 sessionStorage 一样,但是浏览器关闭后,数据依然会一直存在

API

sessionStorage 和 localStorage 的用法基本一致,引用类型的值要转换成JSON

1. 保存数据到本地

  const info = {
name: 'Lee',
age: 20,
id: '001'
};
sessionStorage.setItem('key', JSON.stringify(info));
localStorage.setItem('key', JSON.stringify(info));

  

2. 从本地存储获取数据

    var data1 = JSON.parse(sessionStorage.getItem('key'));
var data2 = JSON.parse(localStorage.getItem('key'));

  

3. 本地存储中删除某个保存的数据

    sessionStorage.removeItem('key');
localStorage.removeItem('key');

4. 删除所有保存的数据

    sessionStorage.clear();
localStorage.clear();

  

5. 监听本地存储的变化

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);
})

  

浏览器查看方法

    1. 进入开发者工具
    1. 选择 Application
    1. 在左侧 Storage 下 查看 Local Storage 和 Session Storage

结合 React 实现用户基本数据的本地存储

界面UI方面的就不展示了,编写两个组件:<Login/>负责登录输入验证; <Home/> 项目主页,展示用户信息

1. 需求

  • <Login/> 组件可以得到用户输入的账号、密码,向服务器发送请求后获得 {id:'',name:'',tel:''}
  • 这些数据是 <Home/>组件正确展示所必须的,否则就会跳转到登录页
  • 我们需要让用户 直接打开主页就可以展示用户信息,不要再跳转到登录页

2. 实现

  • 用户在登录页填写登录信息后,将登录数据存储到 localStorage 中
  • 进入主页,首先获取 localStorage 中的数据,存在数据在直接展示,否则进入登录页
1. 登录数据存储到 localStorage 中

在登录页路由中配置离开页面时处理函数,存储的数据一小时内有效

    <Route path="login" component={Login} onLeave={leaveLoginPage}/>

  

     import store from '../store/index';

    // login 页面 离开时逻辑
export const leaveLoginPage = () => {
// 离开 login 页面 更新 localStorage 中的数据
const {id, name, tel} = store.getState().rootReducer;
const userInfo = {id, name, tel};
const userInfoState = localStorage.getItem('userInfoState'); if (userInfoState) {
// 如果本地存在 userInfoState 将其移除
localStorage.removeItem('userInfoState');
}
localStorage.setItem('userInfoState', JSON.stringify({
userInfo,
timestamp: new Date().getTime()
}));
}

  

2. 进入主页获取 localStorage 中数据

在主页路由中配置进入页面时处理函数

    <Route path="home" component={Home} onEnter={enterHomePage}>

  

    import store from '../store/index';

    // show 页面进入 逻辑
export const enterHomePage = (nextState, replace, next) => {
const rootState = store.getState().rootReducer;
const userInfoState = JSON.parse(localStorage.getItem('userInfoState')); // 判断store 中是否有用户登录数据
if (!rootState.isLogin) {
// 不含有用户登录数据,判断 localStorage 中的数据是否可以使用
const pass = userInfoState && userInfoState.timestamp && new Date().getTime() - userInfoState.timestamp <= 60 * 60 * 1000; if (pass) {
// userInfoState 存在,并且上一次离开在一小时以内,可以读取 localStorage 数据
const storedUserInfo = userInfoState.userInfo; // 'LOGIN' 将获取的数据更新到 store 中
store.dispatch({type: 'LOGIN', msg: storedUserInfo});
next();
} else {
// userInfoState 不存在 或者 已过期,则跳转到登录页
replace('/login');
next();
}
} else {
// store 中 含有 用户登录数据,直接进入相应页面
next();
}
}

  

web本地存储(localStorage、sessionStorage)的更多相关文章

  1. 移动端浏览器隐私模式/无痕模式使用本地存储localStorage/sessionStorage的问题

    移动端浏览器隐私模式/无痕模式使用本地存储localStorage/sessionStorage的问题 开发H5 webapp时经常需要使用本地存储,如localStorage和sessionStor ...

  2. 本地存储localStorage sessionStorage 以及 session 和cookie的对比和使用

    cookie和session都是用来跟踪浏览器用户身份的会话方式. 1.验证当前服务中继续请求数据时,哪些缓存数据会随着发往服务器? 只有cookie中设置的缓存数据会发送到服务器端 2. 强调几点: ...

  3. 本地存储 localStorage/sessionStorage/cookie

    cookie是个基础的东西.是服务器发送到客户端,存储在客户端的一小段数据.可以存储一些配置信息,客户标识信息等.用户下次访问这个网站时,会把上次网站发来的cookie一同发送回去.cookie保存在 ...

  4. web本地存储localStorage和sessionStorage

    用谷歌浏览器调试网页程序时候发现有一个这个栏目 记录本地存储的相关信息(cookie,sessionStorage,LocalStorage等)的存储信息 1.LocalStorage localst ...

  5. web本地存储-LocalStorage

    LocalStorage是HTML5 提供的在客户端存储数据的方法.替代但不同于之前的globalStorage,规则作用范围事先已设定好,是同一个域名(子域无效),使用同一种协议,在同一个端口上.目 ...

  6. HTML5 学习笔记(三)——本地存储(LocalStorage、SessionStorage、Web SQL Database)

    一.HTML4客户端存储 B/S架构的应用大量的信息存储在服务器端,客户端通过请求响应的方式从服务器获得数据,这样集中存储也会给服务器带来相应的压力,有些数据可以直接存储在客户端,传统的Web技术中会 ...

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

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

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

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

  9. html5的本地存储localStorage和sessionStorage

    html5的本地存储localStorage和sessionStorage html5中新增的比较重要的一个功能就是web storage来实现客户端本地存储数据,之前存储数据都是用cookie来实现 ...

随机推荐

  1. 对Java平台的理解

    1)  Java是一种面向对象的语言(封装,继承,多态),最显著的特性有两个方面: ----书写一次,到处运行(Write once,run anywhere) 能够非常容易的获得跨平台的能力 --- ...

  2. springcloud13---zuul

    Zuul:API  GATEWAY (服务网关): http://blog.daocloud.io/microservices-2/ 一个客户端不同的功能请求不同的微服务,那么客户端要知道所有微服务的 ...

  3. SQL学习笔记三(补充-1)之MySQL存储引擎

    阅读目录 一 什么是存储引擎 二 mysql支持的存储引擎 三 使用存储引擎 一 什么是存储引擎 mysql中建立的库===>文件夹 库中建立的表===>文件 现实生活中我们用来存储数据的 ...

  4. Linux内核源码目录说明

    Linux内核源代码位于/usr/src/linux目录下,其结构分布如图1.3所示,每一个目录或子目录可以看作一个模块,其目录之间的连线表示“子目录或子模块”的关系.下面是对每一个目录的简单描述. ...

  5. TrueCrypt简介及TrueCrypt 7.1a Source.zip源码在VS2008下的编译过程

    转载:http://blog.csdn.net/cncrypt/article/details/51565493 转载:http://www.cnblogs.com/shenjieblog/p/521 ...

  6. 如何为openwrt生成补丁

    答:使用quilt工具 步骤如下: 1. 配置quilt $cat> ~/.quiltrc <<EOF QUILT_DIFF_ARGS="--no-timestamps - ...

  7. linux内核启动时报错ubi0 error: validate_ec_hdr: bad data offset 256, expected 128

    1.错误解析 ubi的EC header中有一个字段data_offset来记录数据偏移,数据偏移必须正确才能正确读取每一个物理擦除块中的数据 2.解决方法 擦除整块flash,然后再重新烧写包含ub ...

  8. AOP AspectJ注解

    概念: 切面(aspect):用来切插业务方法的类.连接点(joinpoint):是切面类和业务类的连接点,其实就是封装了业务方法的一些基本属性,作为通知的参数来解析.通知(advice):在切面类中 ...

  9. ISSCC 2017论文导读 Session 14: A 28nm SoC with a 1.2GHz Prediction Sparse Deep-Neural-Network Engine

    A 28nm SoC with a 1.2GHz 568nJ/Prediction Sparse Deep-Neural-Network Engine with >0.1 Timing Erro ...

  10. 【Java----正则关键字转义】

    正则需要转义字符:'$', '(', ')', '*', '+', '.', '[', ']', '?', '\\', '^', '{', '}', '|'   问题现象:  替换URL格式的字符串时 ...