本地存储localstorage
localstorage
是 HTML5 提供的在客户端
存储数据的新方法,主要作用是将数据保存在客户端中,并且数据是永久保存
的,除非人为干预删除。
localstorage
作为本地存储来使用,解决了cookie
存储空间不足的问题:cookie
中每条cookie的存储空间为4k,但localStorage
的存储空间有5M大小。另外,相比于cookie,localStorage
可以节约带宽
,在同一个域内,浏览器每次向服务器发送请求,http都会带着cookie,使cookie在浏览器和服务器之间来回传递,浪费带宽,但localStorage将第一次请求的数据直接存储到本地,避免了来回传递。
localstorage 的局限
1、只有版本较高的浏览器中才支持 localstorage
2、localStorage的值的类型限定为string类型,使用 JSON
时需转换
3、如果存储内容过多会消耗内存空间,导致页面变卡,因为localStorage本质上是对字符串的读取
localstorage 有两种方法:分别是 localstorage
和 sessionStorage
。sessionStorage
方法针对一个 session
进行数据存储。当用户关闭浏览器窗口后,数据会被删除。localStorage与sessionStorage的唯一区别就是localStorage属于永久性存储,而sessionStorage在当会话结束的时候,sessionStorage中的键值对会被清空。
localstorage的用法
我们在使用localStorage的时候,需要先判断浏览器是否支持localStorage这个属性:
if(window.localStorage){
alert("浏览器支持localStorage");
}else{
alert("浏览器支持localStorage");
}
接下来分别是它的写入、读取、删除
//localStorage的写入
var storage=window.localStorage;
storage["a"]=1; //写入a字段
storage.b=2; //写入b字段
storage.setItem("c",3); //写入c字段
console.log(typeof storage["a"]); //string
console.log(typeof storage["b"]); //string
console.log(typeof storage["c"]);//string
//localStorage的读取
var a=storage.a;
console.log(a); //1
var b=storage["b"];
console.log(b); //2
var c=storage.getItem("c");
console.log(c); //3
//localStorage的删除
storage.clear(); //将localStorage的所有内容清除
使用key()方法,获取相应的键
var storage=window.localStorage;
storage.a=1;
storage.setItem("c",3);
for(var i=0;i
对用户访问页面的次数进行计数:
if(localStorage.pagecount){
localStorage.pagecount = Number(localStorage.pagecount)+1;
}else{
localStorage.pagecount = 1;
}
document.write("你第"+localStorage.pagecount+"访问该页面");
sessionStorage的用法和localStorage一样用法和localStorage一样,但是关闭计数页面后再打开时会重新开始计数。
store.js
GitHub地址
store.js 是一个兼容所有浏览器的 LocalStorage 包装器,不需要借助 Cookie 或者 Flash来实现。它提供非常了简洁的 API 来实现跨浏览器的本地存储功能。
store.js的使用
store.js的基本API有:
store.set(key, val) //存储 key 的值为 val;
store.get(key) //获取 key 的值;
store.remove(key) //移除 key 的记录;
store.clear() //清空存储;
store.getAll() //返回所有存储;
store.forEach() //遍历所有存储。
使用store.js提供的方法,需要先引入store.min.js
插件:
首先判断浏览器是否支持本地存储
set
单个存储字符
格式:store.set(key, data[, overwrite]);
store.set('name','mavis'); //存储name的值为 mavis
store.set('name','angel'); //将name的值存储为angel
get
获取存入的key值
格式:store.get(key[, alt])
store.set('name','mavis');
store.set('name','angel');
store.get('name'); //angel
remove
移除key的记录
store.remove('name');
clear
清除所有本地存储:store.clear();
getAll
从所有存储中获取值
格式:store.getAll()
store.set('name','mavis');
store.getAll().user.name == 'mavis'; //true
forEach
遍历所有的值
store.set('user',{name:'mavis',likes:'javascript'}); // 存储对象 - 自动调用 JSON.stringify
var user = store.get('user'); // 获取存储的对象 - 自动执行 JSON.parse
store.forEach(function(key, val) {
console.log(key, '==', val)
}) // 遍历所有存储
使用store,js简化了使用localStorage原生方法的操作
LocalStorage 并没有提供过期时间接口,只能通过存储时间做比对实现。
最后介绍一下在浏览器中查看LocalStorage的方法:F12打开开发人员工具→Application→Storage→LocalStorage