sessionStorage和localStorage的使用

 

前言

这是学习笔记,把从别人博客里转载的https://www.cnblogs.com/wangyue99599/p/9088904.html

目的

是为了清楚的记住这两个知识点,有案例,便于记忆。

1 sessionStorage

需求:首先从后台获取得到一个URL地址,根据路由判断,用户一进入页面显示出一个蒙层,当用户进入当前页面的其他页面再返回时需要使蒙层消失,这时候就使用到了sessionStorage以及它的特性 浏览器关闭时自动销毁,成功解决;

2 localStorage

需求:页面有一个客服入口,每次进入客服时都要请求一次用户信息传给客服,这时候用到了localStorage,用户第一次进入客服时将用户信息保存在浏览器中,这样用户每次进入客服时后台都会直接获取到用户信息

区别

sessionStorage 浏览器关闭时自动销毁

localStorage 存储在浏览器中,无期限

sessionStorage用法

// 保存或设置数据到sessionStorage
sessionStorage.setItem('key','value') // 获取某个sessionStorage
sessionStorage.getItem('key') // 从sessionStorage删除某个保存的数据
sessionStorage.removeItem('key') // 从sessionStorage删除所有保存的数据
sessionStorage.clear();

localStorage用法

// 保存或设置数据到localStorage
localStorage.setItem('key','value') // 获取某个localStorage
localStorage.getItem('key') // 从localStorage删除某个保存的数据
localStorage.removeItem('key') // 从localStorage删除所有保存的数据
localStorage.clear();

21. sessionStorage和localStorage的使用的更多相关文章

  1. sessionStorage 和 localStorage 、cookie

    sessionStorage 和 localStorage html5中web storage包括两种储存方式:sessionStorage 和 localStorage sessionStorage ...

  2. HTMl5的存储方式sessionStorage和localStorage详解

    html5中的Web Storage包括了两种存储方式:sessionStorage和localStorage.sessionStorage用于本地存储一个会话(session)中的数据,这些数据只有 ...

  3. html5 sessionStorage 与 localStorage存储

    sessionStorage用于本地存储一个会话(session)中的数据,这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁.因此sessionStorage不是一种持久化的本地 ...

  4. cookies,sessionStorage 和 localStorage区别

    cookies,sessionStorage 和 localStorage 的区别 cookie是网站为了标示用户身份而储存在用户本地终端(Client Side)上的数据(通常经过加密). cook ...

  5. HTMl5的sessionStorage和localStorage

    HTMl5的sessionStorage和localStorage html5中的Web Storage包括了两种存储方式:sessionStorage和localStorage. sessionSt ...

  6. sessionStorage 、localStorage 与cookie 的异同点

    cookie 容量4kb,默认各种浏览器都支持,缺陷就是每次请求,浏览器都会把本机存的cookies发送到服务器,无形中浪费带宽.userdata,只有ie支持,单个容量64kb,每个域名最多可存10 ...

  7. 【原】灵活运用sessionStorage或者localStorage

    有时,一个app中,后台并没有提供页面中对应的信息接口,需要前端在页面跳转时把某些信息带入下一个页面,一般想到用url后带参数的方法,但是有时需要带的参数过长,就不适合用这个方法了,所以用sessio ...

  8. HTML5中的sessionStorage和localStorage

    html5中的Web Storage包括了两种存储方式:sessionStorage和localStorage. sessionStorage用于本地存储一个会话(session)中的数据,这些数据只 ...

  9. [Html5]sessionStorage和localStorage常见操作

    摘要 [Html5]sessionStorage和localStorage的区别 索引 上篇文章简单介绍了它们的区别,已经常见的用法.那我们能通过. 或者类似dic[key]的方式访问吗?答案是当然可 ...

随机推荐

  1. Java连接mysql数据库攻略

    一. 软件下载 Mysql 下载版本:4.1.11 http://dev.mysql.com/downloads/mysql/4.1.html JDBC驱动 下载版本:3.1.8 http://dev ...

  2. linux命令-分区表fstab

    磁盘分区后需要格式化,挂载之后才能使用 我们有开机后自动挂载的需求,方法有两种 1.配置文件的形式,把mount写到配置文件里去 cat /etc/fstab 2.把挂载命令写到一个文件里 ls /e ...

  3. python之Dict和set类型

    Dict就是一种key:value的表格: >>> d = { 'Adam':95, 'Lisa':85, 'Bart':59, 'Paul':75 } >>> p ...

  4. 我积累的Java实用代码

    1.解压zip文件 /** * 解压输入的zip流,Java默认的解压只能处理UTF-8编码的文件或者目录名,否则会报MALFORMED异常 * * @param is 输入流 * @param ou ...

  5. CentOS 6.3 下编译Nginx(笔记整理)

    1. 安装关联程序 [root@localhost opt]# yum search gcc [root@localhost opt]# yum install gcc-c++ [root@local ...

  6. 20行核心代码:jQuery实现省市二级联动

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  7. PCL—点云分割(基于形态学) 低层次点云处理

    博客转载自:http://www.cnblogs.com/ironstark/p/5017428.html 1.航空测量与点云的形态学 航空测量是对地形地貌进行测量的一种高效手段.生成地形三维形貌一直 ...

  8. Linux 内核与模块调试

    一.简介 内核开发比用户空间开发更难的一个因素就是内核调试艰难.内核错误往往会导致系统宕机,很难保留出错时的现场.调试内核的关键在于你的对内核的深刻理解.   二.方法总结 1)内核模块相关指令 ht ...

  9. R: 绘图 barplot

    问题:barplot 18.5.16 怎么绘制 barplot,用两种方式:基础绘图 & ggplot2解决方案: 基础绘图 barplot(height, width = 1, space ...

  10. EZOJ #82

    传送门 分析 首先我们发现$k$位数实际就是一位的情况的$k$次方 考虑一开始的总方案数是$2^{nm}$ 我们每一次枚举其中有$i$行$j$列 对于这种情况的容斥系数为$(-1)^{i+j}$ 方案 ...