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. leetcode424

    public class Solution { public int CharacterReplacement(string s, int k) { int len = s.Length; ]; , ...

  2. 用命令查看端口占用情况 netstat -ano

    查看所有端口 netstat -ano 可以看到进程ID 参考某个具体端口,第五列就是PID进程ID了. netstat -aon|findstr "80"

  3. 部署和调优 1.6 vsftp部署和优化-2

    映射个虚拟用户 创建个用户,不让他登录 useradd virftp -s /sbin/nologin 创建存放虚拟用户用户和密码的文件 vim /etc/vsftpd/vsftpd_login 写入 ...

  4. Hbase批量插入优化记录

    2016年5月11日10:08:29 hbase原本的put方式是一条一条的put,在客户端修改 AutoFlush 将HTable的setAutoFlush设为false,可以支持客户端批量更新.即 ...

  5. 使用HttpWebRequest POST 文件,带参数

    public string HttpUploadFile(string url, string file, string paramName, string contentType, NameValu ...

  6. PLM数据库迁移注意事项

    需求: PLM应用程序与数据库是存放在同一台服务器上,现需要将数据库迁移到数据库服务器10.10.1.10中. 10.10.1.10中安装了三个实例,MSSQLSERVER.MSSQLSERVER_P ...

  7. ROS Learning-021 learning_tf-05(编程) now() 和 Time(0) 的区别 (Python版)

    ROS Indigo learning_tf-05 now() 和 Time(0)的区别 (Python版) - waitForTransform() 函数 我使用的虚拟机软件:VMware Work ...

  8. ROS Learning-019 learning_tf-03(编程) 添加额外的坐标系 (Python版)

    ROS Indigo learning_tf-03 添加额外的坐标系 (Python版) 我使用的虚拟机软件:VMware Workstation 11 使用的Ubuntu系统:Ubuntu 14.0 ...

  9. boost::thread 库的使用

    转载自:http://blog.csdn.net/yockie/article/details/9181939 概要 通过实例介绍boost thread的使用方式,本文主要由线程启动.Interru ...

  10. WOJ 7 智商

    感觉Dasin去年的毒瘤题质量都挺好的,果然还是我太菜了. 以下假设划横线部分都相等,字符$c$代表一个小写字母. 分类讨论: $#1$ 先考虑$n == m$的情况 : $#1.1 :$ A:   ...