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"); 
vasite = 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;
    }
}

 

posted @ 2018-02-26 16:52  bjlhx15  阅读(185)  评论(0编辑  收藏  举报
Copyright ©2011~2020 JD-李宏旭