存储对象:

  在主流浏览器中,添加了html5  Web Storage API 的接口,storage是一个存储对象,它包括会话存储(session storage)或本地存储(local storage),它们分别有添加、修改或删除存储数据项的功能。

如果我们想要操作一个会话存储(session storage),可以使用 Window.localStorage对象,操作本地存储(local storage),可以使用  Window.sessionStorage对象

localStorage介绍:

  特征:

  ( 1 ).除非手动清除,否则永久保存在浏览器

   ( 1 ).存储大小一般为5MB

  (3).只存在于客户端(浏览器)中,不参与和服务器的通信

  (4).api使用简单,可以直接拿来使用,也可自己封装来对Object和Array有更好的支持

  (5).相同浏览器的不同页面间可以共享相同的 localStorage

  (6).不同浏览器无法共享localStorage或sessionStorage中的信息

  api方法介绍:

  localstorage.setItem(key,value)     //该方法接受键,值两个参数,如果键存在,就更新值

  localstorage.getItem(key)              //该方法接受一个参数值key,返回对应的value值

  localstorage.key(index)            //该方法一个number值,返回对应下标的key

  localstorage.removeItem(key)       //该方法接受一个参数值key,把当前key,value从localstorage中删除

  localstorage.clear()              //该方法 清除对象中所有的key,value

  对localStorage进行封装,可以兼容ie低版本浏览器(通过cookie来做兼容):

var local_storage = {};
local_storage = {
if(!window.localStorage){//当浏览器不支持localstorage的时候,采用cookie来代替localstorage
  return{
    getItem: function (sKey) {
       if(!sKey || !this.hasOwnProperty(sKey)) { return null; }
            return unescape(document.cookie.replace(new RegExp("(?:^|.*;\\s*)" + escape(sKey).replace(/[\-\.\+\*]/g, "\\$&") + "\\s*\\=\\s*((?:[^;](?!;))*[^;]?).*"), "$1"));
},
key: function (nKeyId) {
return unescape(document.cookie.replace(/\s*\=(?:.(?!;))*$/, "").split(/\s*\=(?:[^;](?!;))*[^;]?;\s*/)[nKeyId]);
},
setItem: function (sKey, sValue) {
if(!sKey) { return; }
document.cookie = escape(sKey) + "=" + escape(sValue) + "; expires=Tue, 19 Jan 2038 03:14:07 GMT; path=/";
this.length = document.cookie.match(/\=/g).length;
},
length: (function(){
return (document.cookie.match(/\=/g) || window.localStorage).length;
})(),
removeItem: function (sKey) {
if (!sKey || !this.hasOwnProperty(sKey)) { return; }
document.cookie = escape(sKey) + "=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/";
this.length--;
},
hasOwnProperty: function (sKey) {
return (new RegExp("(?:^|;\\s*)" + escape(sKey).replace(/[\-\.\+\*]/g, "\\$&") + "\\s*\\=")).test(document.cookie);
}
};
}else{
return {
setItem:function(key,value){
window.localStorage.setItem(key,value);
},
getItem:function(key){
console.log(key);
return window.localStorage.getItem(key);
},
removeItem:function(key){
window.localStorage.removeItem(key);
},
removeAll:function(){
window.localStorage.clear();
},
length:(function(){
return window.localStorage.length;
})()
}
}
}

sessionStorage介绍:

   特征:

  (1).仅在当前会话下有效,浏览器被关闭或当前页面被关闭的情况下清除

  (2).存储大小一般为5MB

  (3).只存在于客户端(浏览器)中,不参与和服务器的通信

  (4).api使用简单,可以直接拿来使用,也可自己封装来对Object和Array有更好的支持

  (5).不同页面或标签页间无法共享sessionStorage的信息

  (6).不同浏览器无法共享localStorage或sessionStorage中的信息

  api方法介绍:

  sessionStorage.setItem(key,value)     //该方法接受键,值两个参数,如果键存在,就更新值

  sessionStorage.getItem(key)              //该方法接受一个参数值key,返回对应的value值

  sessionStorage.key(index)            //该方法一个number值,返回对应下标的key

  sessionStorage.removeItem(key)       //该方法接受一个参数值key,把当前key,value从sessionStorage中删除

  sessionStorage.clear()              //该方法 清除对象中所有的key,value

  对sessionStorage进行封装,可以兼容ie低版本浏览器(通过cookie来做兼容):

var session_storage = {};
session_storage = {
if(!window.localStorage){//当浏览器不支持localstorage的时候,采用cookie来代替localstorage
    return{

      getItem: function (sKey) {
        if(!sKey || !this.hasOwnProperty(sKey)) { return null; }
        return unescape(document.cookie.replace(new RegExp("(?:^|.*;\\s*)" + escape(sKey).replace(/[\-\.\+\*]/g, "\\$&") + "\\s*\\=\\s*((?:[^;](?!;))*[^;]?).*"), "$1"));
      },
      key: function (nKeyId) {
        return unescape(document.cookie.replace(/\s*\=(?:.(?!;))*$/, "").split(/\s*\=(?:[^;](?!;))*[^;]?;\s*/)[nKeyId]);
      },
      setItem: function (sKey, sValue) {
        if(!sKey) { return; }
        document.cookie = escape(sKey) + "=" + escape(sValue) + "; path=/";
        this.length = document.cookie.match(/\=/g).length;
      },
      length: (function(){
        return (document.cookie.match(/\=/g) || window.sessionStorage).length;
      })(),
      removeItem: function (sKey) {
        if (!sKey || !this.hasOwnProperty(sKey)) { return; }
        document.cookie = escape(sKey) + "=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/";
        this.length--;
      },
      hasOwnProperty: function (sKey) {
        return (new RegExp("(?:^|;\\s*)" + escape(sKey).replace(/[\-\.\+\*]/g, "\\$&") + "\\s*\\=")).test(document.cookie);
      }
  };

 }else{
return {
     setItem:function(key,value){

        window.sessionStorage.setItem(key,value);
      },
      getItem:function(key){
        console.log(key);
        return window.sessionStorage.getItem(key);
      },
      removeItem:function(key){
        window.sessionStorage.removeItem(key);
      },
      removeAll:function(){
        window.sessionStorage.clear();
      },
      length:(function(){
        return window.sessionStorage.length;
      })()

    }
}
}

参考资料:

  https://developer.mozilla.org/zh-CN/docs/Web/API/Storage

localStorage 和 sessionStorage的区别的更多相关文章

  1. localStorage和sessionStorage的区别

    //在chrome测试的结果; 知识点1:localStorage和sessionStorage的区别; localStorage生命周期是永久,这意味着除非用户显示在浏览器提供的UI上清除local ...

  2. vuex知识笔记,及与localStorage和sessionStorage的区别

    菜单快捷导航 Vuex是什么东东,有什么应用场景?localStorage和sessionStorage能否替代它? Vuex知识点State.Getter.Mutaion.Action Vuex模块 ...

  3. cookie、session、localStorage、sessionStorage的区别

    cookie的机制 cookie是存储在用户本地终端上的数据.有时也用cookies,指某些网站为了辨别用户身份,进行session跟踪而存储在本地终端上的数据,通常经过加密. Cookie是服务器发 ...

  4. localStorage与sessionStorage 的区别

    通过一枚页面计数器来区别localStorage与sessionStorage. 通过一个计数变量pageconut,每刷新页面,增加的是localStorage的数量,而sessionStorage ...

  5. 13.localStorage和sessionStorage的区别

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

  6. cookie、LocalStorage、sessionStorage三者区别以及使用方式

    cookie用来保存客户浏览器请求服务器页面的请求信息 HTML5的WebStorage提供了两种API:localStorage(本地存储)和sessionStorage(会话存储) WebStor ...

  7. cookie、localStorage、sessionStorage的区别

    localStorage - 没有时间限制的数据存储 sessionStorage - 针对一个 session 的数据存储 共同点:sessionStorage.localStorage和cooki ...

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

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

  9. localStorage、sessionStorage的区别

    1.localStorage生命周期是永久的, sessionStorage生命周期为当前窗口或标签页,一旦窗口或标签页被永久关闭了,那么所有通过sessionStorage存储的数据也就被清空了. ...

随机推荐

  1. 书写优雅的shell脚本(七)- ${COLUMN:-}

    ${COLUMN:-} 如果COLUMN是空变量,或者变量不存在,返回-后面的内容,如果变量有值返回这个值.

  2. docker学习 (三) Windows 10 安装Docker

    Docker CE: 社区版,免费. Docker EE: 企业版,收费. 安装:             Windows 10 Pro 64, 必须开启Hyper-v 下载:Docker for W ...

  3. Ubuntu 安装mysql和 简单命令操作

    ubuntu上安装mysql非常简单只需要几条命令就可以完成. 1. sudo apt-get install mysql-server   2. apt-get isntall mysql-clie ...

  4. Eclipse补全功能

    默认当输入 . 时会弹出提示补全, 如何设置 eclipse 代码自动补全,参考 http://jingyan.baidu.com/article/d45ad148b214a969552b8001.h ...

  5. ubuntu删除g2o

    解决方法为:(1)删除/usr/local/include/g2o,指令为sudo rm -rf /usr/local/include/g2o:(2)删除/usr/local/lib下有关libg2o ...

  6. app UI测试之UIAutomator

    执行UIAutomator测试步骤 1.新建Java项目,导入android.jar和uiautomator.jar包,继承UiAutomatorTestCase 2.生成编译文件 android c ...

  7. 【Hadoop】MapReduce笔记(三):MapReduce的Shuffle和Sort阶段详解

    一.MapReduce 总体架构 整体的Shuffle过程包含以下几个部分:Map端Shuffle.Sort阶段.Reduce端Shuffle.即是说:Shuffle 过程横跨 map 和 reduc ...

  8. 【Linux学习】Linux系统管理1—进程管理

    Linux系统管理1-进程管理 一.Linux的三种进程 Linux包括3中不同类型的进程: 交互进程:由一个shell启动的进程.交互进程可以在前后台运行 批处理进程:该进程和终端无联系,是一个进程 ...

  9. 【Linux学习】Linux文件系统5—查看文件内容命令

    Linux文件系统5-查看文件内容命令 cat: 由第一行开始显示文件内容 more: 一页一页地显示文件内容,空格键可以继续翻页显示下一页内容 less:与more类似,但是可以往前翻页 head: ...

  10. Swift3.0 字典简单使用

    Dictionary //定义一个只能存放string 类型的字典 var dict:Dictionary<String,String> = ["一班":"2 ...