Web存储机制—sessionStorage,localStorage使用方法
基本概念
Web Storage 包含两种机制:
sessionStorage
为每一个给定的源维持一个独立的存储区域,该区域在页面会话期间可用(即只要浏览器处于打开状态,包括页面重新加载和恢复)localStorage
同样的功能,但是在浏览器关闭,然后重新打开后数据仍然存在
这两种机制是通过Window.sessionStorage
和Window.localStorage
属性使用。更确切的说,在支持的浏览器中Window
对象实现了WindowLocalStorage
和WindowSessionStorage
对象并挂在其localStorage
和sessionStorage
属性下。调用其中任一对象会创建Storage
对象,通过Storage
对象,可以设置、获取和移除数据项。对于每个源sessionStorage
和localStorage
使用不同的Storage
对象。
例如,在文档中调用localStorage
将会返回一个Storage
对象,调用sessionStorage
返回一个不同的Storage
对象。可以使用相同的方式操作这些对象,但是操作是独立的。
在了解如何使用localStorage
和sessionStorage
之前,先来一下Storage
对象。
Storage对象
Storage
对象作为Web Storage API的接口,Storage
提供了访问特定域名下的会话存储或本地存储的功能。例如,可以添加、修改或删除存储的数据项。
如果想操作一个域名的会话存储,可以使用Window.sessionStorage
;如果想要操作一个域名的本地存储,可以使用Window.localStorage
。
Storage对象的属性和方法
Storage
对象提供自己的属性和方法:
Storage.length
:返回一个整数,表示存储在Storage
对象中的数据项数量。这个是Storage
对象的一个属性,而且是一个只读属性。Storage.key()
:该方法接受一个数值n
作为参数,并返回存储中的第n
个键名Storage.getItem()
:该方法接受一个键名作为参数,返回键名对应的值Storage.setItem()
:该方法接受一个键名和值作为参数,将会把键值对添加到存储中,如果键名存在,则更新其对应的值Storage.removeItem()
:该方法接受一个键名作为参数,并把该键名从存储中删除Storage.clear()
:调用该方法会清空存储中的所有键名
简单的示例
写一个简单的示例,页面就三个按钮:Set
、Get
和Remove
。按钮点击时,分别绑定三个函数:setStorage()
、getStorage()
和removeStorage()
:
setStorage()
:做了localStorage
和sessionStorage
存储,同时存的键名为name
,键值为W3cplus.com
getStorage()
:取得存储的name
,并打印出来removeStorage()
:移除setStorage()
函数中存储的name
本地存储基本用法
前面的示例也演示过了,接下来拿
localStorage
来做示例:localStorage.setItem(
'key'
,
'value'
);
// 设置一个localStorage,名称叫`key`
localStorage.getItem(
'key'
);
// 获取存储的localStorage,获取的`key`对应的值`value`
localStorage.removeItem(
'key'
);
// 移除存储的localStorage,删除的名称`key`
localStorage.clear();
// 删除所有的localStorage
为了方便使用,可以对其进行封装。
设置localStorage
function
setLocalStorage(key, value) {
return
localStorage.setItem(key, value);
}
获取localStorage
function
getLocalStorage(key) {
return
localStorage.getItem(key);
}
移除localStorage
function
removeLocalStorage(key) {
return
localStorage.removeItem(key);
}
注:
sessionStorage
使用方法和localStorage
类似。
来源:爱创课堂
转载于:https://blog.51cto.com/13035262/1942295
Web存储机制—sessionStorage,localStorage使用方法相关推荐
- web存储机制localStorage和sessionStorage
https://www.cnblogs.com/yaoyuqian/p/7901052.html web存储包括两种:sessionStorage 和 localStorage(都是限定在文档源级别, ...
- 前端存储 (2) - sessionStorage ,localStorage
sessionStorage ,localStorage 存储 目录 定义 生命周期 语法 存储大小 注意点 定义 sessionStorage ,localStorage 浏览器提供的api, 可以 ...
- redistemplate给hash存储设置有效期_客户端较为常用的存储机制
哈喽~朋友们,好久不更新了,你们还记得我吗? 前段时间我过得太颓废了,该做的事没有做,天天刷某音,导致自己非常的焦虑和烦躁.后来觉得不能这样下去,于是进行了严肃的自我反省和自我批评.希望自己能慢慢地调 ...
- web存储详解(cookie、sessionStorage、localStorage、indexedDB)
目录 一.web存储概念简介 1. 什么是web存储? 2. 为什么需要web存储? 二.web存储详解 1. cookie 2. sessionStorage和localStorage (1). 相 ...
- HTML5 Web 存储(localStorage和sessionStorage)
localStorage生命周期是永久,除非主动清除localStorage信息,否则这些信息将永远存在.存放数据大小为一般为5MB,而且它仅在客户端(即浏览器)中保存,不参与和服务器的通信. // ...
- HTMl5的存储方式sessionStorage和localStorage详解
html5中的Web Storage包括了两种存储方式:sessionStorage和localStorage.sessionStorage用于本地存储一个会话(session)中的数据,这些数据只有 ...
- 一周内自动登录php,利用php实现一周之内自动登录存储机制(cookie、session、localStorage)...
cookie.session.localStorage这三个应该是最让程序员头疼的了,我利用简单的登录界面的username和password来说明一下吧. 1.cookie用来存储用户相关数据,存储 ...
- 浏览器本地存储Cookie、LocalStorage、SessionStorage
文章目录 浏览器本地存储 浏览器本地存储 浏览器本地存储方式 (1)Cookie Cookie 是最早被提出来的本地存储方式,在此之前,服务端是无法判断网络中的两个请求是否是同一用户发起的,为解决这个 ...
- 页面之间跳转传参数不使用cookie和url的方法,sessionStorage,localStorage
页面之间跳转传参数不使用cookie和url的方法,sessionStorage,localStorage 刚步入工作不久的小白,最近在做一个传感器网站项目的时候是用cookie存取数据,因为网站面向 ...
最新文章
- 自带中心调整的电单车模型-DongGuan BDS
- 如何在Java中检查字符串是否为数字
- 浅析网站搭建时所遇到的这样或那样的问题
- Chino with Geometry(数学,计算几何,记录一下推导证明)
- 2013百度校园招聘-机器学习和数据挖掘工程师-笔试题
- IDEA for win 常用快捷键
- 微服务的好处与弊端_一文了解微服务的流程和组织
- SQL.H 通过此文件寻找sqlAPI编程的一种捷径
- Fluent NHibernate实战(原创)
- vue-cli入门之项目结构分析
- 《.NET框架程序设计》第5章 基元类型、引用类型与值类型
- pandas中每个元素减去所在行的平均值
- 数据文件online和offline
- 【5】天猫精灵开放平台实验—基于天气查询模板创建开发屏显页面技能
- 银行数字化转型导师坚鹏:金融科技与数字化转型成功案例
- 【java获取日期的年月日】
- 忘记Hololens开机密码,重置系统
- Eric靶机渗透测试
- python大学生生活信息交互平台的设计与实现毕业设计源码031315
- 在win上下载安装CTex及其注意事项