sessionStorage、localStorage简介

简介

  技术一般水平有限,有什么错的地方,望大家指正。

  sessionStorage、localStorage、cookie这三个是我们在浏览器端用来存储数据的,cookie使用起来较为繁琐以后进行总结,主要介绍一下sessionStorage和localStorage的用法。sessionStorage和localStorage都是在浏览器端用来存储数据的对象,它们也只在浏览器里有作用不会被发送到服务器端。

sessionStorage

  sessionStorage存活周期就是会话开始直到结束的这段时间,就是从我们打开一个浏览器窗口到关闭浏览器窗口的这段时间内都是有效的,无论是刷新开始重新打开页面当前的sessionStorage都是有效的。当我们在打开一个新窗口的时候就会重新再创建一个sessionStorage对象。

  sessionStorage在我们打开浏览器是被创建,它只能在当前的域名中有效,重新输入一个网址后就会重新创建一个新的sessionStorage对象,但是只要我们不关闭当前的窗口我们在重新输入原网址的时候,原来的sessionStorage仍然是可用的。

  例如:

  我们先打开百度,在console中输入sessionStorage.name = "百度",然后在地址栏中输入google的网址,我们发现google里面是没有sessionStorage.name这个属性的,我们在向url中输入百度的网址,sessionStorage.name仍然是存在的。我们每打开一个网址就会创建一个sessionStorage对象,并且该sessionStorage对象只在当前的域名内有效,当我们关闭浏览器时sessionStorage对象就会消亡。

  sessionStorage是一个对象所以我们就可以通过"."来创建属性和使用属性例如:

sessionStorage.name = "zt";
sessionStorage.age = 23
sessionStorage.name//zt

  sessionStorage同样也给我们提供了几个API来官方了一下我们的使用,我们常用的就是下面这几个:

  length:sessionStorage.length返回当前sessionStorage对象下面有几个属性。

  setItem:sessionStorage.setItem("_key","value")为sessionStorage添加一个属性并赋值,等同与sessionStorage._key = value。

  setItem:sessionStorage.getItem("_key")获取sessionStorage对象上的key属性的值,等同于sessionStorage._key。

  removeItem:sessionStorage.removeItem("_key")删除sessionStorage对象上的一个属性,等同于sessionStorage._key = null。

  clear:sessionStorage.clear()清空sessionStorage上面的所有的属性。

  sessionStorage.getItem()在一些情况下是不能被替代的,例如我们通过sessionStorage.setItem("key","isKey"),设置了一个key的属性,而sessionStorage原型上是有一个key方法的,如果我们sessionStorage.key的话就会去访问key方法,而通过sessionStorage.getItem("key")就可以访问到key属性,但是一定避免我们存储的属性名和原型上的方法名同名。

  sessionStorage只能用来存储字符串:

var arr = [1,2,3];
sessionStorage.data = arr;
sessionStorage.data//1,2,3

  我们想存储一个数组,虽然存进去了但是当我们取出来的时候,发现已经面目全非了,如果要把对象存储在sessionStorage上,首先要先对对象进行一个序列化为字符串的操作,使用时在进行反序列化:

var arr = [1,2,3];
sessionStorage.data = JSON.stringify(arr);
JSON.parse(sessionStorage.data)//[1,2,3]

  通常我们对sessionStorage的使用就是记录一个表单的信息。比如在填写一个复杂的表单时,用户可能会不经意间刷新了网页,这样填写的信息就白填了,通常我们利用sessionStorage来存储用户填写的信息,当用户发送表单后我们在清空信息,这样即使用户刷新了浏览器也可以保留住刚刚填写的信息。

localStorage

  localStorage在API上的使用上和sessionStorage是一致的。不同之处在于,localStorage不会消亡,只要创建了并且我们没有手动销毁(或者清除浏览器历史)就会一直存在于我们的浏览器中。每一个域名都会创建一个localStorage,当前域名只能访问自己的localStorage。localStorage是一直存在于本地的所以我们利用的较为多一些,最近在的项目中用了一次,就是保存用户对一个报表的排序设置,这样每次页面加载的时候从localStorage读取用户的配置,发送到服务器,按照这个顺序返回数据。博客园在写博文时候的自动保存也是利用的localStorage,灵活使用localStorage可以给用户带来极大的便利。

时间: 2024-10-15 21:50:59

sessionStorage、localStorage简介的相关文章

h5的本地存储——sessionStorage,localStorage

HTML5 提供了两种在客户端存储数据的新方法: localStorage - 没有时间限制的数据存储 sessionStorage - 针对一个 session 的数据存储 SessionStorage, LocalStorage, Cookie这三者都可以被用来在浏览器端存储数据,localStorage和sessionStorage都是本地存储. Cookie会在每次发送HTTP请求时附加到Cookie头字段,服务器以此得知用户所处的状态. Web Storage的概念和cookie相似,

H5的storage(sessionstorage&localStorage)简单存储删除

众所周知,H5的storage有sessionstorage&localStorage,其中他们的共同特点是API相同 下面直接上代码,storage中的存储与删除: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <meta name="viewport" content="width=devic

HTML5中的Web Storage(sessionStorage||localStorage)理解与简单实例

Web Storage是什么? Web Storage功能,顾名思义,就是在Web上针对客户端本地储存数据的功能,具体来说Web Storage分为两种: sessionStorage: 将数据保存在session对象中,所谓session是指用户在浏览某个网站时,从进入网站到浏览器关闭所经过的这段时间,也就是用户浏览这个网站所花费的时间.session对象可以用来保存在这段时间内所要求保存的任何数据. localStorage: 将数据保存在客户端本地的硬件设备(通常指硬盘,当然可以是其他的硬

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

session,cookie,sessionStorage,localStorage的区别及应用场景 浏览器的缓存机制提供了可以将用户数据存储在客户端上的方式,可以利用cookie,session等跟服务端进行数据交互. 一.cookie和session cookie和session都是用来跟踪浏览器用户身份的会话方式. 区别: 1.保持状态:cookie保存在浏览器端,session保存在服务器端 2.使用方式: (1)cookie机制:如果不在浏览器中设置过期时间,cookie被保存在内存中

cookie,sessionStorage,localStorage

本文转 sessionStorage 和 localStorage 是HTML5 Web Storage API 提供的,可以方便的在web请求之间保存数据.有了本地数据,就可以避免数据在浏览器和服务器间不必要地来回传递.sessionStorage. localStorage.cookie都是在浏览器端存储的数据,其中sessionStorage的概念很特别,引入了一个“浏览器窗口”的概念. sessionStorage是在同源的同窗口(或tab)中,始终存在的数据.也就是说只要这个浏览器窗口

SessionStorage &amp;&amp; localStorage &amp;&amp; cookie

localStorage生命周期是永久,这意味着除非用户显示在浏览器提供的UI上清除localStorage信息,否则这些信息将永远存在. sessionStorage生命周期为当前窗口或标签页,一旦窗口或标签页被永久关闭了,那么所有通过sessionStorage存储的数据也就被清空了. 不同浏览器无法共享localStorage或sessionStorage中的信息.相同浏览器的不同页面间可以共享相同的localStorage(页面属于相同域名和端口),但是不同页面或标签页间无法共享sess

SessionStorage LocalStorage cookie三者区别

sessionStorage 和 localStorage 是HTML5 Web Storage API 提供的,可以方便的在web请求之间保存数据.有了本地数据,就可以避免数据在浏览器和服务器间不必要地来回传递. sessionStorage.localStorage.cookie都是在浏览器端存储的数据,其中sessionStorage的概念很特别,引入了一个"浏览器窗口"的概念.sessionStorage是在同源的同窗口(或tab)中,始终存在的数据.也就是说只要这个浏览器窗口

sessionStorage localStorage 和 cookie 之间的异同

(转) sessionStorage 和 localStorage 是HTML5 Web Storage API 提供的,可以方便的在web请求之间保存数据.有了本地数据,就可以避免数据在浏览器和服务器间不必要地来回传递. sessionStorage.localStorage.cookie都是在浏览器端存储的数据,其中sessionStorage的概念很特别,引入了一个"浏览器窗口"的概念.sessionStorage是在同源的同窗口(或tab)中,始终存在的数据.也就是说只要这个浏

Web存储机制—sessionStorage,localStorage使用方法

Web存储机制,在这里主要聊有关于Web Storage API提供的存储机制,通过该机制,浏览器可以安全地存储键值对,比使用cookie更加直观.接下来简单的了解如何使用这方面的技术. 基本概念 Web Storage 包含两种机制: sessionStorage为每一个给定的源维持一个独立的存储区域,该区域在页面会话期间可用(即只要浏览器处于打开状态,包括页面重新加载和恢复) localStorage同样的功能,但是在浏览器关闭,然后重新打开后数据仍然存在 这两种机制是通过Window.se