本地存储特性

  1. 数据存储在用户浏览器中
  2. 设置、读取方便、甚至页面刷新不丢失数据
  3. 容量较大,sessionStorage约5M、localStorage约20M
  4. 只能存储字符串,可以将对象JSON.stringify()编码后存储

window.sessionStorage

  1. 生命周期为关闭浏览器窗口
  2. 在同一个窗口(页面)下数据可以共享
  3. 以键值对的形式存储使用

存储数据:sessionStorage.setItem(key, value)

获取数据:sessionStorage.getItem(key)

删除数据:sessionStorage.removeItem(key)

清除数据:sessionStorage.clear()

window.localStorage

  1. 生命周期永久生效,除非手动删除,否则关闭页面也会存在
  2. 可以多窗口(页面)共享(同一个浏览器可以共享)
  3. 以键值对的形式存储使用

存储数据:localStorage.setItem(key, value)

获取数据:localStorage.getItem(key)

删除数据:localStorage.removeItem(key)

清除数据:localStorage.clear()

案例:记住用户名

如果勾选记住用户名,下次用户打开浏览器,就在文本框里面自动显示上次登录的用户名。

案例分析:

  1. 把数据存起来,用到本地存储
  2. 关闭页面,也可以显示用户名,所以用到localStorage
  3. 打开页面,先判断是否有这个用户名,如果有,就在表单里面显示用户名,并且勾选复选框
  4. 当复选框发生改变的时候change事件
  5. 如果勾选,就存储,否则就移除
 1 <input type = "text" id="username" />
2 <input type="checkbox" name="" id="remeber" />记住用户名
3 <script>
4 var username = document.querySelector('#username');
5 var remember = document.querySelector('#remember');
6 if(localStorage.getItem('username')) {
7 username.value = localStorage.getItem('username');
8 remember.checked = true;
9 }
10 remember.addEventListener('change', function() {
11 if (this.checked) {
12 localStorage.setItem('username', username.value);
13 } else {
14 localStorage.removeItem('username');
15 }
16 })
17 </script>

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

  1. (转)HTML5开发学习(2):本地存储之localStorage 、sessionStorage、globalStorage

    原文:http://www.cnblogs.com/xumingxiang/archive/2012/03/25/2416386.html HTML5开发学习(2):本地存储之localStorage ...

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

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

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

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

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

    web 本地存储 (localStorage.sessionStorage) 说明 对浏览器来说,使用 Web Storage 存储键值对比存储 Cookie 方式更直观,而且容量更大,它包含两种:l ...

  5. html5本地存储之localstorage 、本地数据库、sessionStorage简单使用示例

    这篇文章主要介绍了html5本地存储的localstorage .本地数据库.sessionStorage简单使用示例,需要的朋友可以参考下 html5的一个非常cool的功能,就是web stora ...

  6. html5本地存储(localStorage)使用介绍

    1.html5几种存储形式 本地存储(localStorage && sessionStorage) 离线缓存(application cache) indexedDB 和 webSQ ...

  7. store.js - 轻松实现本地存储(LocalStorage)

    store.js 是一个兼容所有浏览器的 LocalStorage 包装器,不需要借助 Cookie 或者 Flash.store.js 会根据浏览器自动选择使用 localStorage.globa ...

  8. HTML5教程之本地存储SessionStorage

    SessionStorage: 将数据保存在session对象中,所谓session是指用户在浏览某个网站时,从进入网站到浏览器关闭所经过的这段时间会话,也就是用户浏览这个网站所花费的时间就是sess ...

  9. 本地存储sessionStorage 、 localStorage 、cookie整理

    sessionStorage . localStorage .cookie 的区别 sessionStorage 和 localStorage 是HTML5 Web Storage API 提供的,可 ...

  10. H5本地存储sessionStorage和localStorage的区别

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

随机推荐

  1. 一篇文章带你掌握性能测试工具——Jmeter

    一篇文章带你掌握性能测试工具--Jmeter 在目前的中大型企业中,仅仅进行功能测试已经不足以满足企业的需求,在重大客户基数下性能测试将会直接影响到用户体验 所以在这篇文章中我们将会学习性能测试的相关 ...

  2. [CF1830D] Mex Tree

    题目描述 You are given a tree with $ n $ nodes. For each node, you either color it in $ 0 $ or $ 1 $ . T ...

  3. SpringBoot整合SpringSecurity实现前后端分离认证授权

    1.什么是SpringSecurity? Spring Security是一个功能强大且高度可定制的身份验证和访问控制框架.它实际上是保护基于spring的应用程序的标准. Spring Securi ...

  4. Vite4+Typescript+Vue3+Pinia 从零搭建(7) - request封装

    项目代码同步至码云 weiz-vue3-template 基于 axios 封装请求,支持多域名请求地址 安装 npm i axios 封装 utils 目录下新建 request 文件夹,并新建 i ...

  5. 试试这 6 个小技巧,提升 EF Core 性能

    Entity FrameWork(简称 EF)以面向对象的方式操作数据库给开发人员带来了很大的便利性,但其性能问题从面世以来就一直就被广大的 .NET 生态开发技术人员所吐槽,然而,它真的那么不堪使用 ...

  6. MongoDB的CRUD操作(入门)

    MongoDB的简单介绍: 1:MongoDB是什么? mongodb是非关系数据库 但是是非关系数据库当中功能最丰富,最像关系数据库的 MongoDB是一个基于分布式文件存储的数据库. 由C++语言 ...

  7. MyBatis—Spring 动态数据源事务的处理

    在一般的 Spring 应用中,如果底层数据库访问采用的是 MyBatis,那么在大多数情况下,只使用一个单独的数据源,Spring 的事务管理在大多数情况下都是有效的.然而,在一些复杂的业务场景下, ...

  8. 快速掌握服务网格系列二:云原生、K8S、服务网格(Service Mesh)及微服务之间的关系

    快速掌握服务网格系列二:云原生.K8S.服务网格(Service Mesh)及微服务之间的关系 首先看下CNCF对云原生的定义: Cloud native technologies empower o ...

  9. LeetCode 数、二叉树、二叉搜索树篇(94、144、145)

    94. 二叉树的中序遍历 给定一个二叉树,返回它的中序 遍历. 示例: 输入: [1,null,2,3] 1 2 / 3 输出: [1,3,2] 进阶: 递归算法很简单,你可以通过迭代算法完成吗? / ...

  10. LiteOS:盘点那些重要的数据结构

    摘要:本文会给读者介绍下LiteOS源码中常用的几个数据结构,包括: 双向循环链表LOS_DL_LIST,优先级队列Priority Queue,排序链表SortLinkList等. 在学习Huawe ...