h5的本地存储.
现代浏览器普遍开始支持H5本地存储,localStorage、sessionStorage。可以用来代替cookie的一部分存储功能,他比cookie存储量更大。比较实用。
两者用法类似。localStorage存储,如果不清除那么一直存在;sessionStorage是在一个会话级别上存在,如果会话关闭,那么就没了。顾名思义吧。
他们存值都是以键值对形式存在,值也是存入字符串类型(如果是对象,就序列化以后再存入)。几乎和memcached,redis这种一样。很好理解。
以下简单演示下增删改查的用法:
<script type="text/javascript"> if(window.sessionStorage){ alert('ok'); }else{ alert('fail'); } // 设置值 sessionStorage.setItem('key_a', 1); // 取值 var key_a = sessionStorage.getItem('key_a'); console.log(key_a); // 删除 sessionStorage.removeItem('key_a'); console.log(sessionStorage.getItem('key_a'));// null sessionStorage.setItem('key_b', 1); sessionStorage.setItem('key_c', 2); // 清除所有键值 sessionStorage.clear(); console.log(sessionStorage.key_b); console.log(sessionStorage.key_c); console.log('=================='); // 设置值和取值也可以使用.符号,类似于取对象属性 // 设置值 sessionStorage.key_d = 12; // 取值 var key_d = sessionStorage.key_d; console.log(key_d); // 有个小区别,如果这个key没有了。一个返回值undefined,一个是null console.log(sessionStorage.key_null);// undefined console.log(sessionStorage.getItem('key_null'));// null console.log('==========简单演示一个存放对象的例子========'); var obj = { a : 12, b : [1,2,3,4,5], c : { x : 'a', y : ['bb', 12, 'cc', {a:1,b:2}], z : 1333 } }; sessionStorage.setItem('page', JSON.stringify(obj)); // 取值 var page = JSON.parse(sessionStorage.getItem('page')); console.log(page); // 遍历下数组 for(var i=0;i< page.b.length;i++){ console.log(page.b[i]); } // 遍历对象,通常用in for(var j in page.c){ console.log(page.c[j]) } // 删除key sessionStorage.removeItem('page'); </script>