HTML5 Web存储之localStorage和sessionStorage
2017-09-22 20:51
555 查看
本文要讲的localStorage和sessionStorage方法都是HTML5中的新方法,也可以完整写成window.localStorage或者window.sessionStorage用于客户端存储数据,两种方法的使用方法是一样的,唯一区别是在存储时效不同。
通过在浏览器上打印这两个方法,我们可以得到它们所有的方法和属性如下:
sessionStorage:针对一个session(会话)的数据存储,也就是说它可以一直存储数据直到我们将浏览窗口关闭销毁。
2.localStorage.length和sessionStorage.length(获取存储变量的个数)
3.valueOf(获取所有存储的数据)和key(读取第i个数据的名字或称为键值(从0开始计数))
4.setItem(存储数据)和getItem(读取固定变量名数据)
5.removeItem(删除某个具体变量)和clear(清空存储的所有数据)
6.hasOwnProperty(检查是否保存某个变量),propertyIsEnumerable(用来检测属性是否属于某个对象的)和toLocaleString(将(数组)转为本地字符串)
通过在浏览器上打印这两个方法,我们可以得到它们所有的方法和属性如下:
一:localStorage和sessionStorage特性
localStorage:持久性,没有时间限制的数据存储,代表它可以对数据一直存储着。sessionStorage:针对一个session(会话)的数据存储,也就是说它可以一直存储数据直到我们将浏览窗口关闭销毁。
二:localStorage和sessionStorage方法
1.直接创建和访问/*localStorage创建和访问*/ localStorage.id='1001'; localStorage.id //'1001' /*sessionStorage创建和访问*/ sessionStorage.id='1001'; sessionStorage.id //'1001'
2.localStorage.length和sessionStorage.length(获取存储变量的个数)
localStorage.id='1001'; localStorage.length // 1 sessionStorage.id='1001'; sessionStorage.length // 1
3.valueOf(获取所有存储的数据)和key(读取第i个数据的名字或称为键值(从0开始计数))
/*访问所有存储的变量*/ localStorage.valueOf(); //localStorage存储的所有变量 sessionStorage.valueOf(); //sessionStorage存储的所有变量 /*访问固定index值存储的变量*/ localStorage.key(0); //localStorage存储的第一个变量的变量名和值 sessionStorage.key(0); //sessionStorage存储的第一个变量的变量名和值
4.setItem(存储数据)和getItem(读取固定变量名数据)
/*存储字符串或其他基本数据类型*/ localStorage.setItem('id','1001'); localStorage.getItem('id');) //'1001' sessionStorage.setItem('id','1001'); sessionStorage.getItem('id')); //'1001' /*localStorage存储JSON对象,sessionStorage同理*/ var obj = { aaa: { name: "aaa", age: 10 }, bbb: { name: "bbb", age: 11 } } localStorage.setItem("newObj",JSON.stringify(obj));//将转为字符串的JSON变量存到localStorage里 console.log(JSON.parse(localStorage.getItem("newObj"))); //转回为JSON对象 ==>return {aaa:{name: "aaa", age: 10},bbb:{name: "bbb", age: 11}}
5.removeItem(删除某个具体变量)和clear(清空存储的所有数据)
/*removeItem删除某个变量*/ localStorage.removeItem('id'); localStorage.id //undefined sessionStorage.removeItem('id'); sessionStorage.id //undefined /*clear清空所有变量*/ localStorage.clear(); //localStorage.length为0 sessionStorage.clear(); //sessionStorage.length为0
6.hasOwnProperty(检查是否保存某个变量),propertyIsEnumerable(用来检测属性是否属于某个对象的)和toLocaleString(将(数组)转为本地字符串)
/*hasOwnProperty方法*/ localStorage.hasOwnProperty('id') // true sessionStorage.hasOwnProperty('id') // true /*toLocaleString方法*/ localStorage.arr = [1,2,3] localStorage.arr.toLocaleString(); //"1,2,3" sessionStorage.arr = [1,2,3] sessionStorage.arr.toLocaleString(); //"1,2,3"
相关文章推荐
- HTML5客户端数据存储Web Storage——localStorage与sessionStorage
- HTML5客户端数据存储Web Storage——localStorage与sessionStorage
- HTML5 web存储之LocalStorage和sessionStorage
- web客户端存储之localStorage和sessionStorage
- html5本地存储之localstorage 、本地数据库、sessionStorage简单使用示例
- HTML5几种存储方式 localstorage sessionstorage application cache Web SQL IndexedDB
- 登录时,记住用户名和密码的功能——HTML5 WEB存储(localStorage)
- HTML5本地存储之localStorage、sessionStorage
- HTML5web存储之localStorage
- Web数据存储之localStorage和sessionStorage
- HTML5 Web存储 sessionStorage localStorage
- HTML5本地存储之Web SQL+LocalStorage+ApplicationCache以及indexed+LocalStorage+ApplicationCache构建的离线应用实例代码
- HTML5 Web存储-localStorage and sessionStorage
- HTML5开发学习(2):本地存储之localStorage 、sessionStorage、globalStorage
- html5本地存储之localstorage 、本地数据库、sessionStorage简单使用示例
- 浏览器本地存储(browser-storage,HTML5-localStorage > IE-UserData > Cookie)
- HTML5 Storage Wars - localStorage vs. IndexedDB vs. Web SQL
- html5 本地存储-sessionStorage localStorage 本地数据库
- Html5之高级-13 Web存储API (两个存储系统、sessionStorage、localStorage)
- HTML5 和 Cocos2d-js 的cc.sys.localStorage本地存储到哪里了?