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

区别:localStorage无时间限制,除非主动删除数据,否则永不过期;sessionStorage用于本地存储一个会话(session)中的数据,这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。

支持:IE7以及IE7以下不支持

sessionStorage和localStorage都具有相同的操作方法,例如setItem、getItem和removeItem等。

setItem:存储value,用法:setItem('key','value');

getItem:获取value,用法:getItem('key','value');

removeItem:删除指定key的value,用法:getItem('key','value');

clear:删清空所有的key/value,用法:getItem('key','value');

<p>本地存储</p>
<input type="button" value='存储到localstorage' onclick="setinfo()">
<input type="button" value="清空所有" onclick="clearAll()">
<input type="button" value="根据key删除" onclick="deleteone()">
<input type="button" value="获取" onclick="getinfo()">
<input type="button" value="遍历" onclick="ergodic()">
<p id='getvalue'></p>
<script>
     //存储信息
function setinfo(){
/*if(typeof window.localStorage == 'undefined'){
alert('浏览暂不支持localStorage')
}*/
if(window.localStorage){
var Storage = window.localStorage;
Storage.setItem("city", "北京");
Storage.setItem("province", "四川");
}else{
alert("浏览暂不支持localStorage")
}
}
//删除指定key的值
function deleteone(){
window.localStorage.removeItem('city');
}
//clear清除所有的key/value
function clearAll(){
var localStorage = window.localStorage;
var sessionStorage = window.sessionStorage;
localStorage.clear();
sessionStorage.clear();
}
//获得指定key的value
function getinfo(){
var getvalue = window.localStorage.getItem('province');
alert(getvalue);
}
//遍历localstorage 使用key()和length
function ergodic(){
var storage = window.localStorage;
//遍历localstorage
for (var i=0, len = storage.length; i < len; i++)
{
var key = storage.key(i);
var value = storage.getItem(key);
console.log("key:"+key + "值:" + value);
} }
    //纪录刷新了多少次页面
if(sessionStorage.visit){
sessionStorage.visit = Number(sessionStorage.visit) + 1;
}else{
sessionStorage.visit = 1;
}
//key:visit value: 1
document.write('刷新了页面'+sessionStorage.visit+'次')     //利用try/catch处理Safari开启无痕浏览
    //有一种情况,浏览器本身支持localStorage但是无法存入数据,例如Safari的无痕浏览模式

      try{
        window.localStorage.name=1;//能存入不会进入catch
      }catch(e){

        //不能写入
        alert('请关闭无痕浏览')
      }

</script>

html5存储方式localstorage和sessionStorage的更多相关文章

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

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

  2. 前端开发本地存储之localStorage和sessionStorage

    1.localStorage 概念 HTML5 web 存储:HTML5 提供了两种在客户端存储数据的新方式:localStorage 和 sessionStorage ,两者都是仅在客户端(即浏览器 ...

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

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

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

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

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

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

  6. 使用HTML5 Web存储的localStorage和sessionStorage方式

    localStorage(本地存储),可以长期存储数据,没有时间限制,一天,一年,两年甚至更长,数据都可以使用.sessionStorage(会话存储),只有在浏览器被关闭之前使用,创建另一个页面时同 ...

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

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

  8. HTML5本地存储之localStorage、sessionStorage

    1.概述 localStorage和sessionStorage统称为Web Storage,它使得网页可以在浏览器端储存数据. sessionStorage保存的数据用于浏览器的一次会话,当会话结束 ...

  9. HTML5 web存储之LocalStorage和sessionStorage

    什么是localstorage 前几天在老项目中发现有对cookie的操作觉得很奇怪,咨询下来是要缓存一些信息,以避免在URL上面传递参数,但没有考虑过cookie会带来什么问题: ① cookie大 ...

随机推荐

  1. java类的初始化顺序

    在java中,当我们new一个对象时,对象中的成员,初始化块以及构造方法的加载是有一定的顺序的,看下面一副图: 一.单类(无基类)下的初始化顺序: public class Parent { stat ...

  2. Struts 原理

    今天开始接触公司的框架,叫YNA,三个字母应该是雅马哈的缩写,这个框架听公司前辈说功能很强大,但实际上我看不懂.哈哈...... 其中整合了SSH框架,接下来我说下Struts的一些原理 其实这张图就 ...

  3. GJM : Unity3D HIAR -【 快速入门 】 三、导入 SDK

    导入 SDK 本文将向您介绍如何在 Unity 工程中导入 HiAR SDK for Unity.在开始之前,请先访问 HiAR 官网下载最新版本的 SDK. 下载 HiAR SDK for Unit ...

  4. Css3新特性应用之形状

    一.自适应椭圆 * border-radius特性:    * 可以单独指定水平和垂直半径,并且值可以是百分比,用/(斜杠)分隔这两个值即可(可以实现自适应宽度椭圆).    * 还可以单独指定四个角 ...

  5. 记处理线上记录垃圾日志 The view 'Error' or its master was not found

    最近监控线上日志,网站是ASP.NET MVC 开发的,发现不少错误日志都记录同样的内容: The view 'Error' or its master was not found or no vie ...

  6. MAC的SVN怎么设置允许.a文件上传

    首先在mac中svn的安装会去选择Cornerstone 如果遇到这个问题肯定是已经安装并准备上传.a 文件了.首先要清楚svn是默认过滤忽略.a文件的上传的,要想可以上传.a 可以通过这个简单的方法 ...

  7. Linux下安装Oracle11g服务器

    1.安装环境 Linux服务器:CentOS  64位 Oracle服务器:Oracle11gR2 64位 2.系统要求 Linux安装Oracle系统要求 系统要求 说明 内存 必须高于1G的物理内 ...

  8. LinuxMint装JDK和Eclipse

    Linux Mint 装JDK和Eclipse 前言 在尝试了好几个发行版后终于锁定了Linux Mint Cinnamon .那么就得配置好环境了. 这里讲一下JAVA环境,配置JDK和Eclips ...

  9. ViewPager 重新加载 及 PagerAdapter 使用

    PagerAdapter 简介 PagerAdapter是android.support.v4包中的类,它的子类有FragmentPagerAdapter, FragmentStatePagerAda ...

  10. js的replace函数入参为function时的疑问

    近期在写js导出excel文件时运用到replace方法,此处详细的记录下它各个参数所代表的的意义. 定义和用法 replace() 方法用于在字符串中用一些字符替换另一些字符,或替换一个与正则表达式 ...