002-localStorage和sessionStorage操作
一、概述
HTML5 提供了两种在客户端存储数据的新方法:
localStorage - 没有时间限制的数据存储 一直存在除非用户手动清除缓存;是基于域的,任何该域下的所有页面都可访问localStorage
sessionStorage - 针对一个 session 的数据存储 浏览器关闭时清除,生命周期(浏览器关闭时销毁).
二、操作方法
localStorage和sessionStorage都具有相同的操作方法,例如setItem、getItem和removeItem等
设置值和取值也可以使用.符号,类似于取对象属性
setItem存储value
用途:将value存储到key字段
用法:.setItem( key, value)
代码示例:
sessionStorage.setItem("key", "value");
localStorage.setItem("site", "jd.com");
getItem获取value
用途:获取指定key本地存储的值
用法:.getItem(key)
代码示例:
var value = sessionStorage.getItem("key");
var site = localStorage.getItem("site");
removeItem删除key
用途:删除指定key本地存储的值
用法:.removeItem(key)
代码示例:
sessionStorage.removeItem("key");
localStorage.removeItem("site");
clear清除所有的key/value
用途:清除所有的key/value
用法:.clear()
代码示例:
sessionStorage.clear();
localStorage.clear();
三、无痕模式
判断浏览器是否无痕浏览模式
if (typeof localStorage === 'object') {
try {
localStorage.setItem('localStorage', 1);
localStorage.removeItem('localStorage');
return true;
} catch (e) {
//Storage.prototype._setItem = Storage.prototype.setItem;
//Storage.prototype.setItem = function() {};
alert('不支持本地存储');
return false;
}
}
002-localStorage和sessionStorage操作的更多相关文章
- html5 Web Storage(localStorage(),sessionStorage())
Web Storage包括了两种存储方式:sessionStorage和localStorage sessionStorage 是会话级别的存储,这些数据只有在同一个会话中的页面才能访问并且当会话结束 ...
- html5 localStorage和sessionStorage
该随便来自: http://www.cnblogs.com/yuzhongwusan/archive/2011/12/19/2293347.html html5中的Web Storage包括了两种存储 ...
- 13.localStorage和sessionStorage的区别
HTMl5的sessionStorage和localStorage html5中的Web Storage包括了两种存储方式:sessionStorage和localStorage. sessionSt ...
- JS 详解 Cookie、 LocalStorage 与 SessionStorage
基本概念 Cookie Cookie 是小甜饼的意思.顾名思义,cookie 确实非常小,它的大小限制为4KB左右.它的主要用途有保存登录信息,比如你登录某个网站市场可以看到"记住密码&qu ...
- Cookie、LocalStorage 与 SessionStorage的区别在哪里?
基本概念 Cookie Cookie 是小甜饼的意思.顾名思义,cookie 确实非常小,它的大小限制为4KB左右.它的主要用途有保存登录信息,比如你登录某个网站市场可以看到“记住密码”,这通常就是通 ...
- cookie,localStorage和sessionStorage区别
三者的异同 特性 Cookie localStorage sessionStorage 数据的生命期 一般由服务器生成,可设置失效时间.如果在浏览器端生成Cookie,默认是关闭浏览器后失效 除非被清 ...
- HTML5本地存储localStorage、sessionStorage基本用法、遍历操作、异常处理等
HTML5 的本地存储 API 中的 localStorage 与 sessionStorage 在使用方法上是相同的,区别在于 sessionStorage 在关闭页面后即被清空,而 localSt ...
- 如何使用T-SQL备份还原数据库及c#如何调用执行? C#中索引器的作用和实现。 jquery控制元素的隐藏和显示的几种方法。 localStorage、sessionStorage用法总结 在AspNetCore中扩展Log系列 - 介绍开源类库的使用(一) span<T>之高性能字符串操作实测
如何使用T-SQL备份还原数据库及c#如何调用执行? 准备材料:Microsoft SQL Server一部.需要还原的bak文件一只 一.备份 数据库备份语句:user master backup ...
- HTML5 学习总结(三)——本地存储(localStorage、sessionStorage、WebSqlDataBase、IndexedDB)
HTML5问世以后,前端加入了一个重要的功能,便是本地存储,本地存储可分为4类: Local Storage:总的存储量有所限制,并不能提供真正的检索API,数据的生命期比窗口或浏览器的生命期长,数据 ...
- HTML5 学习笔记(三)——本地存储(LocalStorage、SessionStorage、Web SQL Database)
一.HTML4客户端存储 B/S架构的应用大量的信息存储在服务器端,客户端通过请求响应的方式从服务器获得数据,这样集中存储也会给服务器带来相应的压力,有些数据可以直接存储在客户端,传统的Web技术中会 ...
随机推荐
- unsolved question's solution
因为很懒,没有时间,只会口胡等等原因,所以有些题目就不打code了 $luogu:$ P1973 [NOI2011]Noi嘉年华: 时间离散化,预处理一个区间$[l,r]$内的最多活动个数$in[l] ...
- 开发jquery插件小结
用jquery开发插件其实很简单.今天实现了一个入门级别的功能. 随便来个DIV,便于理解. div{ height:100px;width:100px;display:block;backgroun ...
- 剑指offer-回溯法-机器人的运动范围-python
题目描述 地上有一个m行和n列的方格.一个机器人从坐标0,0的格子开始移动,每一次只能向左,右,上,下四个方向移动一格,但是不能进入行坐标和列坐标的数位之和大于k的格子. 例如,当k为18时,机器人能 ...
- java中的四种引用方式(强引用,软引用,弱引用,虚引用)
java内存管理主要有内存分配和内存回收,都不需要程序员负责,垃圾回收的机制主要是看对象是否有引用指向该对象. java中对象的引用主要有四种:强引用,软引用,弱引用,虚引用. Java中提供这四种引 ...
- 关于express 连接 mongodb数据库报错
关于express 连接 mongodb数据库报错 nodejs DeprecationWarning: current URL string parser is deprecated, and wi ...
- egretios包接微信/facebook登录
ios包有了,现在需要登录,就先使用微信登录吧,后继加一个facebook登录. 根据我的理解,先预测一下应该是怎么回事吧. 首先应该是要去微信的公共平台注册一下,说我的应用是什么应用,要填写企业信息 ...
- netstat - 显示网络连接,路由表,接口状态,伪装连接,网络链路信息和组播成员组。
总览 SYNOPSIS netstat [address_family_options] [--tcp|-t] [--udp|-u] [--raw|-w] [--listening|-l] [--al ...
- mysql基础知识和pymysql
一.视图 视图是指计算机数据库中的视图,是一个虚拟表,其内容由查询定义.同真实的表一样,视图包含一系列带有名称的列和行数据.但是,视图并不在数据库中以存储的数据值集形式存在.行和列数据来自由定义视图的 ...
- Django开发环境配置(win10)
开发工具 pycharm专业版 安装Django pip install Django==2.0 如果不带版本号,默认安装最新版本查看Django 查看版本: python -m django --v ...
- flutter 布局简介
import 'package:flutter/material.dart'; class LayoutDemo extends StatelessWidget { @override Widget ...