HTML5 Web 存储(localStorage和sessionStorage)
localStorage生命周期是永久,除非主动清除localStorage信息,否则这些信息将永远存在。存放数据大小为一般为5MB,而且它仅在客户端(即浏览器)中保存,不参与和服务器的通信。
- // 1、保存数据到本地
- // 第一个参数是保存的变量名,第二个是赋给变量的值
- localStorage.setItem('Author', 'local');
- // 2、从本地存储获取数据
- localStorage.getItem('Author');
- // 3、从本地存储删除某个已保存的数据
- localStorage.removeItem('Author');
- // 4、清除所有保存的数据
- localStorage.clear();
sessionStorage
sessionStorage仅在当前会话下有效,关闭页面或浏览器后被清除。存放数据大小为一般为5MB,而且它仅在客户端(即浏览器)中保存,不参与和服务器的通信。
- // 1、保存数据到本地
- // 第一个参数是保存的变量名,第二个是赋给变量的值
- sessionStorage.setItem('Author', 'session');
- // 2、从本地存储获取数据
- sessionStorage.getItem('Author');
- // 3、从本地存储删除某个已保存的数据
- sessionStorage.removeItem('Author');
- // 4、清除所有保存的数据
- sessionStorage.clear();
复杂数据存储
上面都是对于简单的数据类型的存储,但当要存储的数据是一个对象或是数组的时候,直接存储是不行的
错误的存储:
- var user = {
- username: 'liu',
- password: '123456'
- };
- sessionStorage.setItem('user', user);
- console.log(sessionStorage.getItem('user'));
这个时候,就需要转换数据格式。
存储数据前:利用JSON.stringify将对象转换成字符串
获取数据后:利用JSON.parse将字符串转换成对象
- var user = {
- username: 'liu',
- password: '123456'
- };
- user = JSON.stringify(user);
- sessionStorage.setItem('user', user);
- var account = sessionStorage.getItem('user');
- console.log(account);
- account = JSON.parse(account)
- console.log(account);
写自定义目录标题)
HTML5 Web 存储(localStorage和sessionStorage)相关推荐
- HTML5本地存储localStorage,sessionStorage
HTML5新特性,用于本地存储, localStorage:不删除会一直存在斯基 sessionStorage:浏览器关掉,就跪了 /*** H5:数据存储方式,可以携带用户信息id* * 注意:* ...
- web前端基础入门开发教程之HTML5 Web 存储
HTML5 Web 存储 在HTML5之前,主要是使用cookies存储,cookies的缺点有:需要在请求头上带着数据,存储大小不过,在4k之内.本节, HTML5 web 存储,一个比cookie ...
- Web存储—localStorage存储
Web存储-localStorage存储 一. localStorage存储 特点:特点:本地存储数据的不需要网络.大小5M .域内安全.永久存储.只要不删除,就一直存在 二.语法 设置:localS ...
- HTML5 学习笔记(三)——本地存储(LocalStorage、SessionStorage、Web SQL Database)
一.HTML4客户端存储 B/S架构的应用大量的信息存储在服务器端,客户端通过请求响应的方式从服务器获得数据,这样集中存储也会给服务器带来相应的压力,有些数据可以直接存储在客户端,传统的Web技术中会 ...
- HTML5本地存储 localStorage
HTML5的本地存储是大势所趋,如果仅存储在内存中,则是sessionStorage,他们的语法都是一样,仅仅是一个存储在本地文件系统中,另一个存储在内存中(随着浏览器的关闭而消失),其语句如下: l ...
- HTML5 Web存储(Web Storage)技术以及用法
使用HTML5可以在本地存储用户的浏览数据.早些时候,本地存储使用的是 cookie.但是Web 存储需要更加的安全与快速,这些数据不会被保存在服务器上,但是这些数据只用于用户请求网站数据上.它也可以 ...
- HTML5 - Web存储使用详解(本地存储、会话存储)
1,Web存储介绍 HTML5的Web存储功能是让网页在用户计算机上保存一些信息.Web存储又分为两种: (1)本地存储,对应 localStorage 对象.用于长期保存网站的数据,并且站内任何页 ...
- H5存储------localStorage和sessionStorage
web现在随着计算机的高速发展,客户端干的事情越来越多了,随着事情的增多,很多东西存储就不止在服务器了,本地存储越来越强大了(大神原谅我废话了????) 早期时期 cookie存储 (之前我用着还是很 ...
- HTML5 本地存储 localstorage 安全分析
在HTML5本地存储出现以前,WEB数据存储的方法已经有很多,比如HTTP Cookie,IE userData,Flash Cookie,Google Gears.其实再说细点,浏览WEB的历史记录 ...
最新文章
- libgstreamer-1.0.so.0: cannot open shared object file: No such file or directory
- buffer busy waits等待事件的原因:hot block [转]
- C++中explicit关键字的使用
- python 调用c++ 回调函数
- aspose.pdf for java_Java 开发者最困惑的四件事
- springboot:thymeleaf
- 3.什么叫堆排序?与快速排序有什么不同?
- 15.2 java中迭代器的注意事项
- python 服务端渲染_客户端渲染和服务器渲染的区别
- 初探swift语言的学习笔记四-2(对上一节有些遗留进行处理)
- 孔子、老子、墨子,春秋时期的三位人杰,谁更厉害?
- 怎么把c语言转换汇编程序,如何把汇编语言转换成C语言
- 论文阅读 - CRNN
- 如何删除github远程仓库?三部搞定!
- 为什么要监控sql语句,以及如何监控,都有哪几种方式可以监控。
- AutoCompleteTextView组件的功能和用法
- cmd 下关闭不需要的进程
- 初级Java程序员如何快速提升自己的能力?
- 快乐数Python解法
- 安装ansys时出现问题 MS.NET Framework would you like to retry?的解决办法:
热门文章
- [html] 说说base标签有什么作用?
- [css] 当使用@font-face的时候,为什么src中要加入local呢?
- 工作71:nexttick使用
- “约见”面试官系列之常见面试题第三十七篇之CSS3新属性(建议收藏)
- 前端学习(1973)vue之电商管理系统电商系统之完成修改的操作
- 前端学习(974):视频插件zy.media.js的使用
- 前端学习(294):rem小实例
- linux(2):linux命令查看开放哪些端口
- java学习(14):java命名规范
- css html5360百科,div+css