一、概述

  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操作的更多相关文章

  1. html5 Web Storage(localStorage(),sessionStorage())

    Web Storage包括了两种存储方式:sessionStorage和localStorage sessionStorage 是会话级别的存储,这些数据只有在同一个会话中的页面才能访问并且当会话结束 ...

  2. html5 localStorage和sessionStorage

    该随便来自: http://www.cnblogs.com/yuzhongwusan/archive/2011/12/19/2293347.html html5中的Web Storage包括了两种存储 ...

  3. 13.localStorage和sessionStorage的区别

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

  4. JS 详解 Cookie、 LocalStorage 与 SessionStorage

    基本概念 Cookie Cookie 是小甜饼的意思.顾名思义,cookie 确实非常小,它的大小限制为4KB左右.它的主要用途有保存登录信息,比如你登录某个网站市场可以看到"记住密码&qu ...

  5. Cookie、LocalStorage 与 SessionStorage的区别在哪里?

    基本概念 Cookie Cookie 是小甜饼的意思.顾名思义,cookie 确实非常小,它的大小限制为4KB左右.它的主要用途有保存登录信息,比如你登录某个网站市场可以看到“记住密码”,这通常就是通 ...

  6. cookie,localStorage和sessionStorage区别

    三者的异同 特性 Cookie localStorage sessionStorage 数据的生命期 一般由服务器生成,可设置失效时间.如果在浏览器端生成Cookie,默认是关闭浏览器后失效 除非被清 ...

  7. HTML5本地存储localStorage、sessionStorage基本用法、遍历操作、异常处理等

    HTML5 的本地存储 API 中的 localStorage 与 sessionStorage 在使用方法上是相同的,区别在于 sessionStorage 在关闭页面后即被清空,而 localSt ...

  8. 如何使用T-SQL备份还原数据库及c#如何调用执行? C#中索引器的作用和实现。 jquery控制元素的隐藏和显示的几种方法。 localStorage、sessionStorage用法总结 在AspNetCore中扩展Log系列 - 介绍开源类库的使用(一) span<T>之高性能字符串操作实测

    如何使用T-SQL备份还原数据库及c#如何调用执行? 准备材料:Microsoft SQL Server一部.需要还原的bak文件一只 一.备份 数据库备份语句:user master backup ...

  9. HTML5 学习总结(三)——本地存储(localStorage、sessionStorage、WebSqlDataBase、IndexedDB)

    HTML5问世以后,前端加入了一个重要的功能,便是本地存储,本地存储可分为4类: Local Storage:总的存储量有所限制,并不能提供真正的检索API,数据的生命期比窗口或浏览器的生命期长,数据 ...

  10. HTML5 学习笔记(三)——本地存储(LocalStorage、SessionStorage、Web SQL Database)

    一.HTML4客户端存储 B/S架构的应用大量的信息存储在服务器端,客户端通过请求响应的方式从服务器获得数据,这样集中存储也会给服务器带来相应的压力,有些数据可以直接存储在客户端,传统的Web技术中会 ...

随机推荐

  1. go & RabbitMQ

    参考 RabbitMQ tutorial - 官方示例 Go code for RabbitMQ tutorials - 官方示例源码 go语言开发RabbitMQ-牛刀小小试试

  2. spring boot 枚举使用的坑2

    上一篇说到在枚举当在controller的方法做参数时的坑,解决方法是配置了一个converter,后来想想,如果不闲每次都加一个注解麻烦的话,可以在参数前面加一个注解,添加一个解析器应该也可以解决这 ...

  3. PHP支付宝手机网站支付功能

    1.开通支付宝商家中心里面的手机网站支付 2.再去开放平台-开发者中心-创建移动支付的应用-获取到APPID 3.接着去文档中心下载DEMO 其实demo很简单.如果第一次看的话会存在看不懂的状态. ...

  4. ThinkPHP5 支付宝支付扩展库(超级简单,超级好用!)

    ThinkPHP5 支付宝支付扩展库, 一个静态方法的调用就可以实现,包括手机网站支付.电脑网站支付.支付查询.退款.退款查询.对账单所有功能,而且是2017年7月20日最新版~我的想法是,调用一个静 ...

  5. 【问题解决方案】visudo: /etc/sudoers is busy, try again later

    参考链接: 博客园:visudo: /etc/sudoers is busy, try again later CSDN:Shell 获取进程号并杀掉该进程 注:找到几篇相同的参考内容,都是只有查看进 ...

  6. selectTree 改造

    需求 把select改为selectTree,后台给的数据也进行了改造,数据里面多了children字段,包裹子集 代码 //import import { Row , Col , Select , ...

  7. 前端开发HTML&CSS入门——具体是做什么的

    软件开发,一提起来感觉这个感觉这个词范围很大很广,说起来也很笼统.不知所云,开发的到底是什么?或者说开发的具体内容是什么?以前我们讲软件开发主要是分前端和后端,那前端和后端又是什么那?你可以这么通俗的 ...

  8. 纯手写实现ajax分页功能

    前言 最近用到了这个功能,百度大半天,网上的不是有各种问题就是需要引入其他的插件,无奈,只能自己写,大致功能已经完成.前端页面用bootstrap做样式,分页功能用ajax实现,没用其他插件哦,只引入 ...

  9. linux Nginx 的安装

    确保安装了 gcc,openssl-devel,pcre-devel,zilb-devel 下载官网:http://nginx.org/ [root@localhost tools]# wget ht ...

  10. POI2012 ODL-Distance

    链接P3532 [POI2012]ODL-Distance 设\(f_{i,j}\)表示他给定的函数,\(g_i\)表示\(i\)的质因数个数 那么\[f_{i,j}=g_{\frac {i*j}{g ...