html5 Web Storage(localStorage(),sessionStorage())
2015-12-20 21:54
507 查看
Web Storage包括了两种存储方式:sessionStorage和localStorage
sessionStorage 是会话级别的存储,这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。
localStorage 是持久化的本地存储,除非主动删除数据,否则数据是永远不会过期的。
Web Storage与cookie异同
cookie 支持的数据内容小,8k左右。localStorage目前能支持到10M。
每次请求一个新的页面的时候Cookie都会被发送过去,浪费了带宽。
cookie 需要指定作用域,不可以跨域调用。
Web Storage 拥有setItem,getItem,removeItem,clear等方法,cookie 需要前端开发者自己封装setCookie,getCookie方法。
localStorage浏览器支持情况
localStorage和sessionStorage操作
localStorage.setItem(key,value) // 设置键值对
localStorage.getItem(key) // 通过键值读取对应的值
localStorage.removeItem(key) // 通过键值移除对应的值
localStorage.clear() // 初始化localStorage,清除所有键值对
localStorage.key(index) // 通过下标index来获取指定索引的key名
其他操作方法:点操作和[ ]
相关:IE专属存储 UserData.
sessionStorage 是会话级别的存储,这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。
localStorage 是持久化的本地存储,除非主动删除数据,否则数据是永远不会过期的。
Web Storage与cookie异同
cookie 支持的数据内容小,8k左右。localStorage目前能支持到10M。
每次请求一个新的页面的时候Cookie都会被发送过去,浪费了带宽。
cookie 需要指定作用域,不可以跨域调用。
Web Storage 拥有setItem,getItem,removeItem,clear等方法,cookie 需要前端开发者自己封装setCookie,getCookie方法。
localStorage浏览器支持情况
<script type="text/javascript"> // method one if(window.localStorage){ alert("浏览支持localStorage") }else{ alert("浏览暂不支持localStorage") } // method two if(typeof window.localStorage == 'undefined') { alert("浏览暂不支持localStorage") } </script>
localStorage和sessionStorage操作
localStorage.setItem(key,value) // 设置键值对
localStorage.getItem(key) // 通过键值读取对应的值
localStorage.removeItem(key) // 通过键值移除对应的值
localStorage.clear() // 初始化localStorage,清除所有键值对
localStorage.key(index) // 通过下标index来获取指定索引的key名
其他操作方法:点操作和[ ]
<script type="text/javascript"> var storage = window.localStorage; storage.key1 = "hello"; storage["key2"] = "world"; console.log(storage.key1); console.log(storage["key2"]); </script>
相关:IE专属存储 UserData.
相关文章推荐
- 使用Html5异步上传文件,支持跨域,带有上传进度条
- HTML5 地理定位 原理
- HTML5地理定位用法
- html5地理位置定位API接口开发
- HTML5离线应用无法更新的定位与解决
- html5实际和离线应用分析
- 8款超酷的HTML5 3D图片动画源码
- HTML5 Audio/Video 标签,属性,方法,事件汇总
- html5 audio音频播放全解析
- html5声频audio和视频video说明
- html5声频audio和视频video
- HTML5 文件拖放API讲解
- HTML5拖放API2
- HTML5 File API初探支持文件拖放上传功能
- HTML5拖放API
- 使用HTML5进行地理位置定位。误差在+-500m
- HTML5之地理位置
- 利用html5 共享地理位置
- Dive Into HTML5:地理位置
- HTML5开发:地理位置定位指南