本地存储localStorage以及它的封装接口store.js的使用

本地存储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 < storage.length; i++) {
	var key = storage.key(i);
	console.log(key); //a  c
}​

 

对用户访问页面的次数进行计数:

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() //遍历所有存储。

首先判断浏览器是否支持本地存储

<script type = "text/javascript">
	init();

function init() {
	if (!store.enabled) {
		alert("你的浏览器不支持本地存储，请使用更高版本的浏览器");
		return;
	} else {
		......
	}
} 
</script>  

 

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');

在控制台可以看到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

 

文章转载自：https://segmentfault.com/a/1190000007539338