sessionstorage怎么读（sessionStorage 与localStorage 的区别）

本文目录

• sessionStorage 与localStorage 的区别
• JQuery和JS操作LocalStorage/SessionStorage的方法
• cookie，localStorage和SessionStorage
• window.sessionStorage、window.localStorage与cookie总结
• HTML5面试中常会被问到的面试题有哪些
• html5的sessionstorage性能原理问题
• localStorage和sessionStorage

sessionStorage 与localStorage 的区别

***隐藏网址***
下面我们来说下localStorage的存，读，删

设置数据：localStorage.setItem(key,value)

读取数据：localStorage.getItem(key)

删除数据：localStorage.removeItem(key,value)

清空全部数据：localStorage.clear()
《div id="test"》《/div》

《script》

//检查浏览器是否支持storage

if(typeof(Storage)!==’undefined’){

localStorage.setItem("name","mfz")

document.getElementById("test").innerHtml=localStorage.getItem(’name’);

}else{

document.getElementById("test").innerHtml="您的浏览器不支持storage";
}

《/script》

JQuery和JS操作LocalStorage/SessionStorage的方法

localStorage方法用来在本地存储数据。比如用户刚刚已经填过一次资料，后返回这一页查看，需要之前填的信息都显示着。

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

针对一个 session 的数据存储
大小限制在5M左右，各个浏览器不一致
仅在当前浏览器窗口关闭前有效（适合会话验证）
不在不同的浏览器窗口中共享，即使是同一个页面

获取键值：localStorage.getItem(“key”)
设置键值：localStorage.setItem(“key”,”value”)
清除键值：localStorage.removeItem(“key”)
清除所有键值：localStorage.clear()
获取键值2：localStorage.keyName
设置键值2：localStorage.keyName = “value”

获取键值：window.localStorage.getItem(“key”)
设置键值：window.localStorage.setItem(“key”,”value”)
清除键值：window.localStorage.removeItem(“key”)
清除所有键值：window.localStorage.clear()
获取键值2：window.localStorage.keyName
设置键值2：window.localStorage.keyName = “value”

localStorage的使用也是遵循同源策略的，所以不同的网站直接是不能共用相同的localStorage

存储进去的是int类型，但是打印出来却是string类型，这个与localStorage本身的特点有关，localStorage只支持string类型的存储。

三种对localStorage的读取，其中官方推荐的是getItem\setItem这两种方法对其进行存取

修改：

将localStorage的所有内容清除

将localStorage中的某个键值对删除

一般我们会将JSON存入localStorage中，但是在localStorage会自动将localStorage转换成为字符串形式

这个时候我们可以使用JSON.stringify()这个方法，来将JSON转换成为JSON字符串

示例：

读取之后要将JSON字符串转换成为JSON对象，使用JSON.parse()方法

cookie，localStorage和SessionStorage

cookie就是通过浏览器在同域下交互的数据。
在chrome中，查看cookie的方法：打开控制台，Resources -》 cookies。

语法：

如果只设置value值，那么在设置的时候，后面会把前面的覆盖。
如果有多个相同的key值即设置了key也设置了value值，这个时候，后面会把前面的覆盖。
cookie一般用于在浏览器中缓存数据用。

cookie的大小是有限制的 ，每个浏览器支持的都不一样，有的50条，有个20条..

默认的cookie的声明周期，当浏览器关闭之后，这个cookie的生命周期结束。这条cookie就会被删除。

设置cookie的生命周期

用上面的方式可以为这条cookie添加N天的生命周期

如果需要删除一条cookie，那么就设置他的生命周期比当前时间还小，那么就会被删除了。

cookie是即可读也可以写入的

在读取的时候，如果当前页面有多个cookie那么，是由;+空格链接的。

如果需要分割，那么使用 ; 作为分割符进行分割。

localstorag是HTML5的数据存储的新API，是一个没有时间限制的数据存储。在这之前，这些都是由 cookie 完成的。但是 cookie 不适合大量数据的存储，因为它们由每个对服务器的请求来传递，这使得 cookie 速度很慢而且效率也不高。
在 HTML5 中，数据不是由每个服务器请求传递的，而是只有在请求时使用数据。它使在不影响网站性能的情况下存储大量数据成为可能。
对于不同的网站，数据存储于不同的区域，并且一个网站只能访问其自身的数据。

localstorage大小一般限制在 5MB 左右，各个浏览器不同，以后或许还会增加
而 cookie 的大小只有 4KB

浏览器支持情况：
理论上支持IE8以上和标准浏览器。

虽然这个API是html5新添加的，但是在IE的仿真功能中测试的时候，即使是IE5都可以使用。

在标准浏览器中，可以在本地查看 localstorage
IE浏览器必须使用localhost查看

生命周期：
localstorage如果不删除就会一直存在

参数：
key：key值
value：value值
其中，value不能放入对象，如果放入数组会使用 , 将它链接字符串。
如果需要放入对象，需要使用JSON.stringify来转换成json格式在放入

参数：
key：key值
获取到的value都是一个字符串。
如果需要使用json格式的内容，那么就使用JSON.parse把它转化为对象

删除一条名字为key的localstorage信息。

删除所有的localstorage信息。

当操作了本地存储的数据的时候，会触发 storage 这个事件,这个事件不会在操作的页面上触发，只会在同浏览器的同源页面上触发（这两个页面都需要storage事件）。这相当与，可以在同浏览器的同源页面上监听当前页面的操作。

在 storage 对象下，有一些可以直接使用的属性，例如： ldValue , newValue , key 等等

注意：
storage 对象只能在localhost环境下才能进行监听

window.sessionStorage、window.localStorage与cookie总结

前言：最近项目中用到了本地存储和cookie，虽然平时也经常提到，但是在用的时候还是有些模糊，这里做一下总结，以便加深记忆。

Web Storage是为了在本地“存储”数据而生，均不会被发送到服务器端。包括了两种存储方式：sessionStorage和localStorage，这两个对象在支持的浏览器中都是以 window 对象属性的形式存在的。

相同点：

1、仅在客户端中保存，不参与和服务器的通信

2、都有同源策略限制，不同浏览器无法共享localStorage或sessionStorage中的信息

3、存储大小均为5M左右

不同点：

1、生命周期

localStoage：是一种永久性存储，除非手动清除。

sessionStorage：会话存储，存储在 sessionStorage 里面的数据在页面会话结束时会被清除，也就是一旦窗口或者标签页被关闭，那么所有通过 sessionStorage 存储的数据也会被删。页面会话在浏览器打开期间一直保持，并且重新加载或恢复页面仍会保持原来的页面会话。

2.作用域

localStorage: 在同一个浏览器内，同源文档（页面属于相同域名和端口）之间，即使是不同页面可以共享 localStorage 数据，可以互相读取、覆盖。

sessionStorage: 与 localStorage 一样需要同一浏览器同源文档这一条件。不仅如此，sessionStorage 的作用域还被限定在了窗口中，也就是说，只有同一浏览器、同一窗口的同源文档才能共享数据。

语法：

sessionStorage或localStorage两种存储方式几乎都有相同的方法和属性。

1.localStorage.length 和 sessionStorage.length : 返回本地存储列表长度;需要说明的是可以通过localStorage对象获取对应的存储数据，比如已经存储了一个键为name的数据，使用localStorage.name获取存储数据；下面的方法都是基于localStorage 对象 或 sessionStorage 对象；

2.getItem( keyName )方法：通过键获取存储的数据；

3.setItem( keyName,value )方法：存储数据，keyName为存储数据的键，value实际要存储的数据（可以把keyName理解成 给要存储的数据起的名字，便于管理）；

4.removeItem( keyName )方法： 将指定键名的数据删除；

5.clear() 方法：清空所有的存储数据；

6.key() 方法： 获取键值，需要注意的是并不能返回指定布尔值需要作进一步处理

基本概念

1、cookie 确实非常小，它的大小限制为4KB左右。

2、要表示唯一的一个cookie值需要：name、domain、path

3、一般由服务器生成，可设置失效时间。如果在浏览器端生成Cookie，默认是关闭浏览器后失效。

4、每次都会携带在HTTP头中，如果使用cookie保存过多数据会带来性能问题。

cookie的使用

document.cookie，通过该方法可以读取、修改、删除cookie。

HTML5面试中常会被问到的面试题有哪些

1.XHTML和HTML有什么区别

HTML是一种网页设计语言，XHTML是一个置标语言。两者最大的不同是：XHTML元素必须被正确嵌套;XHTML元素必须被关闭;标签名必须用小写字母;XHTML文档必须拥有根元素。

2.前端页面有哪三层构成，分别是什么?作用是什么?

结构层HTML，表示层 CSS ，行为层 js。

3.什么是语义化的HTML?

HTML语义化就是让页面的内容结构化，便于对搜索引擎解析;在没有样式的情况下也以一种文档格式显示，并且是容易阅读的。搜索引擎的爬虫依赖于标记来确定上下文和各个关键字的权重。这样使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解。

4.Doctype作用?标准模式与兼容模式各有什么区别?

DOCTYPE作用是告知浏览器的解析器用什么文档标准解析这个文档。如果DOCTYPE不存在或者是格式上的不正确可以回会导致文档以兼容模式来呈现。标准模式和JS运作模式都是以该浏览器支持的最高标准运行。在兼容模式中，页面以向后兼容的方式显示,模拟浏览器的行为以防止站点无法工作。

5. cookies，sessionStorage 和 localStorage 三者有何区别?

Cookie是在浏览器和服务器间来回传递的。sessionStorage和localStorage的存储空间比cookies会更大些;而且sessionStorage和localStorage相比cookies有更多的丰富易用的接口;另外，sessionStorage和localStorage都有它们各自独立的存储空间。

6.如何实现浏览器内多个标签页之间的通信?

调用localstorge、cookies等的本地存储方式可以实现浏览器内多个标签页之间的通信。

更多资讯，请及时关注本平台，小编会为您做详细的整理和总结。

html5的sessionstorage性能原理问题

HTMl5的sessionStorage和localStorage
html5中的Web Storage包括了两种存储方式：sessionStorage和localStorage。
sessionStorage用于本地存储一个会话（session）中的数据，这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储，仅仅是会话级别的存储。
而localStorage用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。
web storage和cookie的区别
Web Storage的概念和cookie相似，区别是它是为了更大容量存储设计的。Cookie的大小是受限的，并且每次你请求一个新的页面的时候Cookie都会被发送过去，这样无形中浪费了带宽，另外cookie还需要指定作用域，不可以跨域调用。
除此之外，Web Storage拥有setItem,getItem,removeItem,clear等方法，不像cookie需要前端开发者自己封装setCookie，getCookie。
但是Cookie也是不可以或缺的：Cookie的作用是与服务器进行交互，作为HTTP规范的一部分而存在 ，而Web Storage仅仅是为了在本地“存储”数据而生（来自@otakustay 的纠正）
html5 web storage的浏览器支持情况
浏览器的支持除了IE7及以下不支持外，其他标准浏览器都完全支持(ie及FF需在web服务器里运行)，值得一提的是IE总是办好事，例如IE7、IE6中的UserData其实就是javascript本地存储的解决方案。通过简单的代码封装可以统一到所有的浏览器都支持web storage。
要判断浏览器是否支持localStorage可以使用下面的代码：
if(window.localStorage){ alert("浏览支持localStorage") }else{ alert("浏览暂不支持localStorage") } //或者 if(typeof window.localStorage == ’undefined’){ alert("浏览暂不支持localStorage") }
localStorage和sessionStorage操作
localStorage和sessionStorage都具有相同的操作方法，例如setItem、getItem和removeItem等
localStorage和sessionStorage的方法
setItem存储value
用途：将value存储到key字段
用法：.setItem( key, value)
代码示例：
sessionStorage.setItem("key", "value"); localStorage.setItem("site", "js8.in");
getItem获取value
用途：获取指定key本地存储的值
用法：.getItem(key)
代码示例：
var value = sessionStorage.getItem("key"); var site = localStorage.getItem("site");
removeItem删除key
用途：删除指定key本地存储的值
用法：.removeItem(key)
代码示例：
sessionStorage.removeItem("key"); localStorage.removeItem("site");
clear清除所有的key/value
用途：清除所有的key/value
用法：.clear()
代码示例：
sessionStorage.clear(); localStorage.clear();
其他操作方法：点操作和
web Storage不但可以用自身的setItem,getItem等方便存取，也可以像普通对象一样用点(.)操作符，及的方式进行数据存储，像如下的代码：
var storage = window.localStorage; storage.key1 = "hello"; storage);
localStorage和sessionStorage的key和length属性实现遍历
sessionStorage和localStorage提供的key()和length可以方便的实现存储的数据遍历，例如下面的代码：
var storage = window.localStorage; for (var i=0, len = storage.length; i 《 len; i++){ var key = storage.key(i); var value = storage.getItem(key); console.log(key + "=" + value); }
storage事件
storage还提供了storage事件，当键值改变或者clear的时候，就可以触发storage事件，如下面的代码就添加了一个storage事件改变的监听：
if(window.addEventListener){ window.addEventListener("storage",handle_storage,false); }else if(window.attachEvent){ window.attachEvent("onstorage",handle_storage); } function handle_storage(e){ if(!e){e=window.event;} }

localStorage和sessionStorage

localStorage（本地存储）和sessionStorage（会话存储）是HTML5的WebStorage提供的两种API，区别如下：

localStorage的生命周期是永久的，关闭页面或浏览器之后localStorage中的数据也不会消失。除非主动删除数据，否则数据永远不会消失。

sessionStorage的生命周期是仅在当前会话下有效。sessionStorage引入了一个“浏览器窗口”的概念，sessionStorage是在同源的窗口中始终存在的数据。只要这个浏览器窗口没有关闭，即使刷新页面或者进入同源另一个页面，数据依然存在。但是sessionStorage在关闭了浏览器窗口后就会被销毁。同时独立的打开同一个窗口同一个页面，sessionStorage也是不一样的。

localStorage和sessionStorage的存储数据大小一般都是：5MB

localStorage和sessionStorage都保存在客户端，不与服务器进行交互通信。

localStorage和sessionStorage只能存储字符串类型，对于复杂的对象可以使用ECMAScript提供的JSON对象的stringify和parse来处理

localStorage：window.localStorage；sessionStorage：window.sessionStorage

localStoragese：常用于长期登录（+判断用户是否已登录），适合长期保存在本地的数据。sessionStorage：敏感账号一次性登录；

cookie为4KB，而WebStorage是5MB；

WebStorage不会传送到服务器，存储在本地的数据可以直接获取，也不会像cookie一样美词请求都会传送到服务器，所以减少了客户端和服务器端的交互，节　　省了网络流量；

对于那种只需要在用户浏览一组页面期间保存而关闭浏览器后就可以丢弃的数据，sessionStorage会非常方便；

有的数据存储在WebStorage上，再加上浏览器本身的缓存。获取数据时可以从本地获取会比从服务器端获取快得多，所以速度更快；

WebStorage不会随着HTTP header发送到服务器端，所以安全性相对于cookie来说比较高一些，不会担心截获，但是仍然存在伪造问题；

setItem (key, value) —— 保存数据，以键值对的方式储存信息。
getItem (key) —— 获取数据，将键值传入，即可获取到对应的value值；
removeItem (key) —— 删除单个数据，根据键值移除对应的信息。
clear () —— 删除所有的数据；
key (index) —— 获取某个索引的key

保存数据的方法：

读取数据的方法：

保存数据的方法：

读取数据的方法：

1、所谓的浏览器页面之间共享信息只能由localStorage来完成，并且前提是相同的域名、协议和端口号，对于sessionStorage来说，即使域名、协议和端口相同，那么sessionStorage的信息也是无法共享的
2、localStorage生命周期是永久，这意味着除非用户手动清除localStorage信息，否则这些信息将永远存在，sessionStorage生命周期为当前窗口或标签页，一旦窗口或标签页被永久关闭了，那么所有通过sessionStorage存储的数据也就被清空了。

在保存数据时，若使用sessionStorage读取或保存数据，则使用sessionStorage对象并调用该对象的读写方法；若使用localStorage读取或保存数据，则使用localStorage对象并调用该对象的读写方法。在进行读写时，不管是哪个对象，都可以通过该对象的getItem方法来读取数据，也可以该对象的自定义属性值读取数据；可以通过该对象的setItem方法保存数据，也可以通过该对象的自定义属性值保存数据。保存数据时按“键名/键值”的形式进行保存。当通过该对象的getItem方法读取数据时，将参数指定为键名，该方法返回键值；当通过该对象的自定义属性值读取数据时，可以将该对象的某个自定义属性名作为键名，访问该自定义属性的属性值即可得到键值；当通过该对象的setItem方法保存数据时，将第一个参数指定为键名，将第二个参数指定为键值；当通过该对象的自定义属性值保存数据时，可以将该对象的某个自定义属性名作为键名，然后直接将该自定义属性值设置为键值。在保存数据时不允许重复保存相同的键名。保存后可以修改键值，但不允许修改键名(只能重新取键名，然后再保存键值)。