localStorage、sessionStorage用法总结

  • localStorage和sessionStorage一样都是用来存储客户端临时信息的对象。
  • 他们均只能存储字符串类型的对象(虽然规范中可以存储其他原生类型的对象,但是目前为止没有浏览器对其进行实现)。
  • localStorage生命周期是永久,这意味着除非用户显示在浏览器提供的UI上清除localStorage信息,否则这些信息将永远存在。

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

  • 不同浏览器无法共享localStorage或sessionStorage中的信息。相同浏览器的不同页面间可以共享相同的localStorage(页面属于相同域名和端口),但是不同页面或标签页间无法共享sessionStorage的信息。这里需要注意的是,页面及标签页仅指顶级窗口,如果一个标签页包含多个iframe标签且他们属于同源页面,那么他们之间是可以共享sessionStorage的。
  • 同源的判断规则:

    http://www.test.com

    https://www.test.com (不同源,因为协议不同)

    http://my.test.com(不同源,因为主机名不同)

    http://www.test.com:8080(不同源,因为端口不同)

  • localStorage和sessionStorage使用时使用相同的API:

    localStorage.setItem("key","value");//以“key”为名称存储一个值“value”

    localStorage.getItem("key");//获取名称为“key”的值

    枚举localStorage的方法:

    for(var i=0;i<localStorage.length;i++){

    var name = localStorage.key(i)?;

    var value = localStorage.getItem(name);?

    }

    删除localStorage中存储信息的方法:

    localStorage.removeItem("key");//删除名称为“key”的信息。

    localStorage.clear();?//清空localStorage中所有信息

  • 通过getItem或直接使用localStorage["key"]获取到的信息均为实际存储的副本。

    例如:

    localStorage.key = {value1:"value1"}?;

    localStorage.key.value1=‘a‘?;

    这里是无法?对实际存储的值产生作用的,下面的写法也不可以:

    ?localStorage.getItem("key").value1="a";

时间: 2024-10-08 18:37:57

localStorage、sessionStorage用法总结的相关文章

解读cookie,localstorage,sessionstorage用法与区别2(解读cookie)

说到本地存储 HTML5 提供了两种在客户端存储数据的新方法: localStorage - 永久存储(可以手动删除数据) sessionStorage - session临时回话,从页面打开到页面关闭的时间段 窗口的临时存储,页面关闭,本地存储消失 其实前景和作用和cookie也是相同甚至从cookie演变而来,用一张图来表示服务商对本地存储的探索. 由图就可以看出本地存储的和cookie的区别,存储大且无插件. 这时也许就该思考H5的最大问题兼容性,这是本地存储支持情况图. 检测: if(w

解读cookie,localstorage,sessionstorage用法与区别

cookie cookie概念 cookie 是存储于访问者的计算机中的变量.每当同一台计算机通过浏览器请求某个页面时,就会发送这个 cookie.你可以使用 JavaScript 来创建和取回 cookie 的值. 为什么提出cookie? 由于HTTP是一种无状态的协议,服务器单从网络连接上无从知道客户身份.怎么办呢?就给客户端们颁发一个通行证吧,每人一个,无论谁访问都必须携带自己通行证.这样服务器就能从通行证上确认客户身份了.这就是Cookie的工作原理. 我的理解 cookie为一小段文

sessionStorage和localStorage的用法,不同点和相同点

一,共同点 (1)存储时用setItem: localStorage.setItem("key","value");//以"key"为名称存储一个值"value"sessionStorage.setItem("key", "value"); (2)获取时用getItem: localStorage.getItem("key");//获取名称为"key&quo

localStorage sessionStorage cookie indexedDB

目录: localStorage sessionStorage cookie indexedDB localStorage localStorage存储的数据能在跨浏览器会话保留 数据可以长期保留,关闭会话,数据不会被清除 存储的键值对,是以字符串的形式存储的,数值类型会自动转化为字符串. 用法 // 等价,键值对以字符串形式存储,和js对象不一样 window.localStorage.setItem('x',1) // '1' window.localStorage.setItem('x',

iOS开发和localStorage/sessionStorage

一.前言 在近期的工作中,有前端同学告诉我要清除localStorage,我当时对localStorage完全没有概念,所以就在w3c看了一下相关的内容,下面简单的介绍一下.算是对iOS开发者普及H5的一些常识吧,高手请直接忽略. 二.localStorage && sessionStorage 在HTML5中,为了在客户端存储数据,HTML提供了两种在客户端存储数据的新方法: * localStorage:没有时间限制的数据存储. * sessionStorage:针对一个session

JQuery和JS操作LocalStorage/SessionStorage的方法

JQuery和JS操作LocalStorage/SessionStorage的方法 LocalStorage 是对Cookie的优化 没有时间限制的数据存储 在隐私模式下不可读取 大小限制在500万字符左右,各个浏览器不一致 在所有同源窗口中都是共享的 本质是在读写文件,数据多的话会比较卡(firefox会一次性将数据导入内存) 不能被爬虫爬取,不要用它完全取代URL传参 IE7及以下不支持外,其他标准浏览器都完全支持 SessionStorage 针对一个 session 的数据存储 大小限制

html5 webStorage:localStorage sessionStorage

localStorage sessionStorage的使用: 与cookie相比,webStorage有很多优势(如本文结尾),所以在选择的时候,优先选择webStorage! sessionStorage使用方法完全同localStorage一致,不同之处: 1 localStorage:没有时间限制的数据存储,类似于cookie,一直存在,直到用户清除数据: 2 sessionStorage只针对一个 session 的数据存储,关闭当前网页/窗口就会消失: 1 if(typeof(Sto

localstorage sessionstorage cookie 备忘

/* sessionStorage: 保存的数据用于浏览器的一次会话,当会话结束(通常是该窗口关闭),数据被清空: localStorage: 保存的数据长期存在,下一次访问该网站的时候,网页可以直接读取以前保存的数据. Cookie: Cookie的内容会随着请求一并发送的服务器,容量小. 本地存储的有点: 减少网络流量,一旦数据保存在本地后,就可以避免再向服务器请求数据,因此减少了不必要的数据请求, 减少数据在浏览器和服务器间不必要地来回传递.从本地读数据比通过网络从服务器获得数据快得多.

localStorage的用法

1.在HTML5中,本地存储是一个window的属性,包括localStorage和sessionStorage,前者是一直存在本地的,后者是伴随着session,窗口一旦关闭就消失了.二者用法完全相同 2.存储数据的方法就是直接给window.localStorage添加一个属性,localStorage里面的数据是以键值对的方式存在的,可以使用getItem()和setItem()方法设置和获取数据. 3. 向localStorage里存放多次存放相同对象名的数据时,需要先从localSto