两分钟教你学会

教你学会"/>

两分钟教你学会

一、会话

学过后端的都知道，我们后台有一个session域，学过JSP的都了解过九大内置对象里面就有存储数据的方法，session就是“会话”，很多时候我们会把当前用户的信息放入session因此在跳转不同界面的时候右上角会显示"欢迎您，尊敬的XXX"。这是通过走了后台将值存入了session域里，session的作用范围是一次会话，及关闭窗口作用域消失，此外还有cookie在这里我也不做过多解释。
很多时候，从后台接口返回回来的数据遍历在前端，当我们点击下一个页面的时候，有时并不想或者条件局限不走后台而又想将值带入下一个界面有什么办法呢，可以用问号传参带到下一个页面，后台不接受，到下一个页面用js的方法window.location.search可以将url的数据都接回来，但是如果是get请求的话，则没有办法实现了，当然还有jsp的<c:set>方法，如果是html界面呢？？ 可能还有别的方法，本人之前自学过一点点的html5元素，在这里主要讲解两个方法：sessionStorage和localStorage前端传值。
针对于我来说，在目前的公司里面，我利用这个方法帮助同事解决了Base64图片编码的传值，从接口回来的idList集合传入下一个界面等，今天自己也有用到，于是做了笔记，方便同行取长补短吧。

W3C的API

localStorage 和 sessionStorage 属性允许在浏览器中存储 key/value 对的数据。

sessionStorage 用于临时保存同一窗口(或标签页)的数据，在关闭窗口或标签页之后将会删除这些数据。

提示: 如果你想在浏览器窗口关闭后还保留数据，可以使用 localStorage 属性， 该数据对象没有过期时间，今天、下周、明年都能用，除非你手动去删除。

1.1localStorage

localStorage 是 HTML5 标准中新加入的技术，它并不是什么划时代的新东西。早在 IE 6 时代，就有一个叫 userData 的东西用于本地存储，而当时考虑到浏览器兼容性，更通用的方案是使用 Flash。而如今，localStorage 被大多数浏览器所支持，如果你的网站需要支持 IE6+，那以 userData 作为你的 polyfill 的方案是种不错的选择。

1.2sessionStorage

sessionStorage 与 localStorage 的接口类似，但保存数据的生命周期与 localStorage 不同。 sessionStorage 是一个前端的概念，它只是可以将一部分数据在当前会话中保存下来，刷新页面数据依旧存在。但当页面关闭后，sessionStorage 中的数据就会被清空。

此外，两个对象的存储数据大小5M！很方便实用，也很简单。下面教大家如何去使用
localStorage和sessionStorage的方法

setItem存储value

用途：将value存储到key字段

语法：sessionStorage.setItem(“key”, “value”); localStorage.setItem(“key”, “value”);
用法：

localStorage.setItem("test", "南京维数");
localStorage.setItem("test","南京维数");

通过get则渠道localStora里面的值

getItem获取value

用途：获取指定key本地存储的值

语法：var value = sessionStorage.getItem(“key”); var value = localStorage.getItem(“key”);
用法：

var njws = localStorage.getItem("test");

不管在下一个页面还是在哪一个页面，可以利用js的getItem去取sessionStorage里面的值，同时，界面上sessionStorage及个别的存储对象在控制台也有记录

这是我的测试，到页面去查看

由此也可侧面反映出该作用域也并不是很安全，所以要慎用，存储一些不是很重要的值，同时，在用完以后也要去将SessionStorage及localStorage的值删除掉。删除的方法:

2.1清空sessionSorage和localStorage的值方法

语法：

sessionStorage.removeItem("key");
localStorage.removeItem("key");

用法：
sessionStorage.removeItem(“测试”);

当页面的js上面有删除的方法时候，页面渲染完毕打开控制台发现，当时存储的值已经被删空，至此，前端的存储方式学习完毕，是不是很简单？却非常实用。

sessionStorage和localStorage的特点

localStorage和sessionStorage一样都是用来存储客户端临时信息的对象。

他们均只能存储字符串类型的对象（虽然规范中可以存储其他原生类型的对象，但是目前为止没有浏览器对其进行实现）。

localStorage生命周期是永久，这意味着除非用户显示在浏览器提供的UI上清除localStorage信息，否则这些信息将永远存在。

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

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

同源的判断规则：

（不同源，因为协议不同）

（不同源，因为主机名不同）

:8080（不同源，因为端口不同）

localStorage和sessionStorage使用时使用相同的API：