关于storage的一些说明和拓展

关于storage的一些说明和拓展

用于记录理解storage中一些机制和想法，用于个人之后的参考和使用！

正常localstorage的使用

//JavaScript 代码:

// 增加了一个 localStorage ‘myCat’ 数据项
localStorage.setItem('myDta', 'firstData');
 
// 读取 localStorage ‘myCat’ 数据项
let cat = localStorage.getItem('myDta');
 
// 移除 localStorage ‘myCat’ 数据项
localStorage.removeItem('myDta');
 
// 移除所有的 localStorage 数据项
localStorage.clear();

localStorage 对象 和 Storage 对象关系

首先来说说 Storage 对象，Storage 提供了访问特定域名下的会话存储（session storage）或本地存储（local storage）的功能，例如，可以添加、修改或删除存储的数据项。

Storage 对象通过 Window.sessionStorage 和 Window.localStorage 属性使用（更确切的说，在支持的浏览器中 Window 对象实现了 WindowLocalStorage 和 WindowSessionStorage 对象并挂在其 localStorage和 sessionStorage 属性下）—— 调用其中任一对象会创建相应的 Storage 对象，通过 Storage 对象，可以设置、获取和移除数据项。对于每个源（origin）sessionStorage 和 localStorage 使用不同的 Storage对象——独立运行和控制。

有点绕口是吧？我们说的直接一点。 localStorage 对象其实就是 Storage 对象的实例对象。我们可以在 Firefox 的开发者工具的控制台(Console)面板中输入 Storage，localStorage，查看这两个对象，再输入 localStorage instanceof Storage 或者 localStorage.constructor == Storage 查看这两个对象的关系：

Chrome 控制台(Console)面板中输入 Storage 看不到内容，但是原理是一样的：

localStorage 是 Storage 对象的实例对象！

访问和设置数据一些新的写法

JavaScript 代码:
// 设置值
localStorage.myData = 'firstData';
localStorage['myData'] = 'firstData';
localStorage.setItem('myData', 'firstData');
// 获取值
localStorage.myCat; // 'firstData'
localStorage['myData']; // 'firstData'
localStorage.getItem('myData'); // 'firstData'

使用 localStorage.hasOwnProperty() 检查 localStorage 中存储的数据里是否保存某个值

hasOwnProperty() 方法检查对象自身属性中是否具有指定的属性，返回一个布尔值。换句话说就是检查 localStorage 中存储的数据里是否保存某个值。

localStorage.hasOwnProperty('myCat') // true
localStorage.hasOwnProperty('youCat') // false

Object.keys(localStorage) 查看 localStorage 中存储数据所有的键
想知道 localStorage 中存储了哪些值，我们可以直接使用 Object.keys(localStorage) 查看，很方便。

localStorage.key(index) 方法

//假设index为5的时候 就是存储了一个myData的数据
localStorage.key(5); // "myData"

localStorage.length 属性

将 JSON 存储到 localStorage 里

//将一个大数组或者对象存储到 localStorage 中。而 localStorage 只能存储字符串，所以我们可以使用 JSON 方法对存取值进行转换：
var users = [
{
name: "xiaoming",
grade: 1
},
{
name: "teemo",
grade: 3
}
];
//存储数据
usersStr = JSON.stringify(users); //将JSON转为字符串
localStorage.users = usersStr; // 将字符串存到 localStorage users 键下
// 取数据
var newUsers = JSON.parse(localStorage.users);// 转为JSON
console.log(newUsers); // 打印出原先对象

为 localStorage 设置过期时间

//localstorage 原生是不支持设置过期时间的，想要设置的话，就只能自己来封装一层逻辑来实现：
function set(key,value){
	var curtime = new Date().getTime();//获取当前时间
	localStorage.setItem(key,JSON.stringify({val:value,time:curtime}));//转换成json字符串序列
}
function get(key,exp){//exp是设置的过期时间
	var val = localStorage.getItem(key);//获取存储的元素
	var dataobj = JSON.parse(val);//解析出json对象
	if(new Date().getTime() - dataobj.time > exp){//如果当前时间-减去存储的元素在创建时候设置的时间 > 过期时间
	console.log("expires");//提示过期
	}else{
		console.log("val="+dataobj.val);
	}
}
//原理就是在存值得时候附带一个设置的时间，取值的时候传一个时间过期时间（毫秒），和存的时间做比较，然后做相应的操作。

storage 事件

当存储数据发生变化时，会触发 storage 事件。值得特别注意的是，该事件不在导致数据变化的当前页面触发。如果浏览器同时打开一个域名下面的多个页面，当其中的一个页面改变 sessionStorage 或 localStorage 的数据时，其他所有页面的storage事件会被触发，而原始页面并不触发 storage 事件。可以通过这种机制，实现多个窗口之间的通信。（当然 ie 这个特例除外，它包含自己本身也会触发 storage 事件）。 例如我们全局下监听 storage 事件，

window.addEventListener("storage",function onStorageChange(event) {
// event 对象中几个主要属性：
console.log(event.key); //更新值得键
console.log(event.oldValue); //更新前的值。如果该键为新增加，则这个属性为null。
console.log(event.newValue); //更新后的值。如果该键被删除，则这个属性为null。
// 如果 Storage 调用的是 clear 方法，则事件中的 key 、oldValue 、newValue 都是为 null
console.log(event.url); //原始触发storage事件的那个网页的网址。
});

localStorage 中一些常用和不常用的方法，sessionStorage 原理相同，只是会话结束后 sessionStorage 会被清空。
以上内容来自地址（请点击查看原文出处）

–end–