cp from : https://blog.csdn.net/mjzhang1993/article/details/70820868

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

浏览器查看方法

  • 进入开发者工具
  • 选择 Application
  • 在左侧 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 前端] web本地存储(localStorage、sessionStorage)的更多相关文章

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

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

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

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

  3. web前端实现本地存储

    当我们在提及web前端本地存储的时候,首先需要介绍一下本地化存储的概念和历史.本地化存储从来不是一个新奇的概念,因为web应用程序一直在追求的就是媲美甚至超越桌面应用程序.但是桌面应用程序一直优于we ...

  4. 本地存储 localStorage/sessionStorage/cookie

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

  5. html5的本地存储localStorage和sessionStorage

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

  6. 关于HTML5本地缓存技术LocalStorage 本地存储 和 SessionStorage

    如果你想在用户访问的时候记录或者记住他们的行为,你会想到的是什么,cookie 和session.但今天告诉你还有两种或者说是1种吧 那就是html5的 LocalStorage 本地存储和 Sess ...

  7. 【转】本地存储-localStroage/sessionStorage存储

    原文地址:[js学习笔记-103]----本地存储-localStroage/sessionStorage存储 客户端存储 l  WEB存储 web存储最初作为html5的一部分被定义成API形式,但 ...

  8. 本地存储localStorage以及它的封装接口store.js的使用

    本地存储localStorage以及它的封装接口store.js的使用 sublime-text chrome javascript readyGo 2016年11月20日发布   0 推荐 9 收藏 ...

  9. 本地存储 localStorage

    本地存储localStorage 概念:window对象下面的属性,html5新增的,将5M大小的数据存储本地的浏览器上面. 浏览器支持存储5M大小 本地存储localStorage特点 本地存储属于 ...

随机推荐

  1. 图学ES6-6.数值的扩展

  2. PHP文件上传及下载源码

    一.文件上传 前台页面: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> ...

  3. spring中注册bean(通过代码动态注册)

    看公司的源代码,在一个类中使用到了BeanDefinitionBuilder这个类,在学习之后才知道在项目中可能没有注册bean,在使用的时候才会进行注册,就涉及到了动态bean的注册,所以,在文章中 ...

  4. PAT 1066. Root of AVL Tree (25)

    An AVL tree is a self-balancing binary search tree. In an AVL tree, the heights of the two child sub ...

  5. 移动端h5需要注意的一些事

    1.移动端点击a标签出现的背景色 a, a:hover, a:active, a:visited, a:link, a:focus { -webkit-tap-highlight-color: rgb ...

  6. Vue之双向绑定原理动手记

    Vue.js的核心功能有两个:一是响应式的数据绑定系统,二是组件系统.本文是通过学习他人的文章,从而理解了双向绑定原理,从而在自己理解的基础上,自己动手实现数据的双向绑定. 目前几种主流的mvc(vm ...

  7. qq sid qq sid 是什么 qq sid 怎么用

    韩梦飞沙  韩亚飞  313134555@qq.com  yue31313  han_meng_fei_sha ======= qq sid qq sid  是什么 qq sid  怎么用 ===== ...

  8. HDU 3802Ipad,IPhone

    前两块可以看成是不是二次剩余,快速幂计算即可. 后半部分可以看成x1=a+b+2ab,x2=a+b-2ab为特征方程x^2-px-qx=0的两根 然后可以通过韦达定理求出p和q,因此递推式为A(n+2 ...

  9. 【坐标离散化】AOJ0531- Paint Color

    日文题……一开始被题目骗了以为真的要写文件? 题目大意&&解答戳:❀ #include<iostream> #include<cstdio> #include& ...

  10. ORA-01591 锁定已被有问题的分配事务处理--解决方法(转)

    转载自love wife & love life —Roger 的Oracle技术博客 本文链接地址: ORA-01591: lock held by in-doubt distributed ...