sessionStorage、localStorage用法总结

转载 2018年04月17日 15:36:39
  1. 作用:首先说明一下:sessionStorage和localStorage一样都是用来存储客户端临时信息的对象。
  2. 存储内容的数据类型:两者皆储存字符串类型的数据。
  3. 生命周期

    1. sessionStorage:生命周期是当前窗口或标签页,一旦窗口或标签页被关闭了,那么所有通过sessionStorage存储的数据也就被清空了。
    2. localStorage:生命周期是永久,这意味着除非用户显式操作在浏览器提供的UI上清除localStorage信息,否则这些信息将永远存在。
  4. 信息是否可共享: 不同浏览器无法共享localStorage或sessionStorage中的信息。相同浏览器的不同页面间可以共享相同的localStorage(页面属于相同域名和端口),但是不同页面或标签页间无法共享sessionStorage的信息。这里需要注意的是,页面及标签页仅指顶级窗口,如果一个标签页包含多个iframe标签且他们属于同源页面,那么他们之间是可以共享sessionStorage的。

  5. html5 web storage的浏览器支持情况 
          浏览器的支持除了IE7及以下不支持外,其他标准浏览器都完全支持(ie及FF需在web服务器里运行)。

  6. localStorage和sessionStorage操作(下面例子以sessionStorate为例)

    1. setItem存储value 
      sessionStorage.setItem(“key”,”value”);//以“key”为名称存储一个值“value” 
      eg: sessionStorage.setItem(“realName”,”韩梅梅”);
    2. getItem获取value 
      sessionStorage.getItem(“key”);//获取名称为“key”的值
    3. removeItem(“key”) 删除key 
      sessionStorage.removeItem(“realName”);
    4. clear() 清除所有内容 
      sessionStorage.clear();​//清空sessionStorage中所有信息。 
      localStorage也拥有以上四个方法
  7. * 点操作和[]* 
    web Storage不但可以用自身的setItem,getItem等方便存取,也可以像普通对象一样用点(.)操作符,及[]的方式进行数据存储,像如下的代码:

var storage = window.localStorage; 
    storage.key1 = "hello"; 
    storage['key2']="world";
    console.log(storage.key1);   // 结果:hello 
    console.log(storage["key2"]);  // 结果world
  • 1
  • 2
  • 3
  • 4
  • 5

8.存与取

var tempInfo = { realName:$("#realName").val(),idNo:$("#idNo").val()};
  var str1 = JSON.stringify(tempInfo); 
       sessionStorage.tempInfo = str1; 
   取
  var str=sessionStorage.tempInfo;
    if(str !='' && str != undefined){
        var obj = JSON.parse(str);
        $('#realName').val(obj.realName);
    }
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10

sessionStorage和localStorage使用时的注意事项

先说一下我写这篇最想记录的,然后在跟写一下他们的基本用法。注意事项sessionStorage和localStorage 在存储对象时只会得道字符串类型得值,无法得到期望得值,看一下例子 var o...
  • zcy_csdn123
  • zcy_csdn123
  • 2018-01-03 15:56:28
  • 285

H5-localStorage、sessionStorage使用方法

HTML5提供了在客户端存储数据的新方法,除IE7及以下不支持外,其他浏览器均支持。 简述: localStorage - 没有时间限制的数据存储,只要用户不手动清除将会一直保留在本地; ...
  • qq_16371909
  • qq_16371909
  • 2017-04-05 15:50:27
  • 1886

浅谈session,cookie,sessionStorage,localStorage的区别及应用场景

浏览器的缓存机制提供了可以将用户数据存储在客户端上的方式,可以利用cookie,session等跟服务端进行数据交互。一、cookie和sessioncookie和session都是用来跟踪浏览器用户...
  • zgrkaka
  • zgrkaka
  • 2017-01-22 11:36:53
  • 3159

localStorage和sessionStorage使用总结

在HTML5中,新加入了一个localStorage和sessionStorage特性,这个特性主要是用来作为本地存储来使用的,解决了cookie存储空间不足的问题(cookie中每条cookie的存...
  • qjhsmd2015
  • qjhsmd2015
  • 2017-04-14 10:25:29
  • 1083

html5本地存储localStorage与sessionStorage详解

公司战略层面全面拥抱html5,为响应公司号召,我开始了html5之学习之旅,虽然我是java后台开发。在这里把今天用到的localStorage记录下来备忘。         localStorag...
  • qq_33556185
  • qq_33556185
  • 2016-01-30 19:25:17
  • 3451

Cookie、session和localStorage、以及sessionStorage之间的区别

一、Cookie、session和localStorage的区别 cookie的内容主要包括:名字、值、过期时间、路径和域。路径与域一起构成cookie的作用范围。若不设置时间,则表示这个c...
  • ruby_xc
  • ruby_xc
  • 2017-03-25 19:34:22
  • 7173

LocalStorage、SessionStorage使用详解

localStorage使用总结 一、什么是localStorage、sessionStorage 在HTML5中,新加入了一个localStorage特性,这个特性主要是用来作为本地存储来...
  • zhongzh86
  • zhongzh86
  • 2017-02-17 09:25:36
  • 282

cookie/sessionStorage/localStorage 的区别及用法

区别 本地 cookie 可以跨浏览器使用,可以设置有效期,可以跨标签使用。 sessionStorage 只用来单页面存储数据 localStorage 用来永久保存数据 相同点都是用来存储数据!用...
  • weixin_38788347
  • weixin_38788347
  • 2017-12-06 19:18:09
  • 147

JS的本地保存localStorage、sessionStorage用法总结

JS的本地保存localStorage、sessionStorage用法总结
  • kerryqpw
  • kerryqpw
  • 2017-05-09 09:36:06
  • 11047

【H5】localStorage、sessionStorage用法总结

localStorage和sessionStorage一样都是用来存储客户端临时信息的对象。 他们均只能存储字符串类型的对象(虽然规范中可以存储其他原生类型的对象,但是目前为止没有浏览器对其...
  • DHASA
  • DHASA
  • 2016-02-25 18:39:51
  • 8159
收藏助手
不良信息举报
您举报文章:sessionStorage、localStorage用法总结
举报原因:
原因补充:

(最多只允许输入30个字)