资讯专栏INFORMATION COLUMN

JavaScript新知:sessionStorage and localStorage

whataa / 3365人阅读

摘要:对象是一次会话内的存储,它主要用于在一次会话内的多个页面内共享数据。文件则负责显示当前的值安装并启动访问我们点击按钮设置之后,导航到页面,会发现显示的值是页面内设置的值。如果需要在这样的情况下也可以访问,那么需要把改为。

对象sessionStorage是一次会话内的存储,它主要用于在一次会话内的多个页面内共享数据。

如下案例使用了vue.js,你需要了解vue.js。此案例会有两个文件:

touch a.html b.html

文件a.html内容为:

    
    
    
{{count}} go to B

此文件的按钮点击一次,为span标签的值加一,并且设置新值到sessionStorage.count内。

文件b.html则负责显示当前的sessionStorage.count值:

    
    
    
page A "s session value {{count}} Back to A

安装并启动http server

npm i http-server -g
http-server

访问localhost:8080/a.html ,我们点击按钮设置sessionStorage.count之后,导航到b页面,会发现显示的值是a页面内设置的值。这说明在同一个会话内的页面间是可以通过sessionStorage来共享数据的。

如果打开一个新的页面,在访问b,显示的值就不能和a页面设置的相同,这是因为新开的页面和原来的a页面的会话并不一致。如果需要在这样的情况下也可以访问,那么需要把sessionStorage改为localStorage。你不妨试试。

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/81244.html

相关文章

  • cookie ajax git 相关面试题

    摘要:什么是如何创建一个异步在后台与服务器进行异步数据交换,不用重载整个网页,实现局部刷新。除此之外,拥有等方法,不像需要前端开发者自己封装,。 什么是 Ajax? 如何创建一个Ajax? AJAX(Asynchronous Javascript And XML) = 异步 JavaScript + XML 在后台与服务器进行异步数据交换,不用重载整个网页,实现局部刷新。创建 ajax 步骤...

    xavier 评论0 收藏0
  • HTML5中新增Javascript特性

    摘要:和支持事件通知机制,可以将数据更新的通知发送给监听者。语言采用的是单线程模型,的目的,就是为创造多线程环境,允许主线程将一些任务分配给子线程。在主线程运行的同时,子线程在后台运行,两者互不干扰。等到子线程完成计算任务,再把结果返回给主线程。 存储 localStorage 存储: window.localStorage.setItem(key, value); 取值: window.l...

    shadajin 评论0 收藏0
  • js客户端存储之Web存储

    摘要:存储客户端存储有几种方式,存储就是其中一种。浏览器兼容性存储有效期永久性。实际上,的数据是写入磁盘中,每次读取数据时,实际上是从硬盘驱动器上读取这些字节。所以不要在客户端存储敏感信息,比如密码或信用卡信息。 WEB存储 客户端存储有几种方式,WEB存储就是其中一种。最初作为H5的一部分被定义成API形式,后来被剥离出来作为独立的标准。所描述的API包含localStorage对象和se...

    ixlei 评论0 收藏0
  • sessionStoragelocalStorage

    摘要:前端存储和简述曾在项目中多次使用过和来存放,但一直未深入了解。以为例他们均只能存储字符串类型的对象存储大小都为都遵守同源策略不同点有期限,当窗口或浏览器关闭时就会被销毁。本文如有错误,欢迎指出。 H5前端存储 localStorage 和 sessionStorage 简述 曾在项目中多次使用过localStorage和sessionStorage来存放token,但一直未深入了解。近...

    wujl596 评论0 收藏0

发表评论

0条评论

whataa

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<