似懂非懂的localStorage和sessionStorage

时间：2023-12-17 18:20:02

一、区别

相信很多人都见过这两个关于HTML5的新名词！
HTML5种的web storage包含两种存储方式：localStorage和sessionStorage，这两种方式存储的数据不会自动发给服务器，仅仅是本地保存，有大小限制。

localStorage是持久化的本地保存，除非主动删除，不然会一直存在，而且在所有的同源窗口中都是可以共享的；

sessionStorage是会话级别的本地保存，比如一个页面关闭的时候该页面设置的sessionStorage数据会自动消失，在不同浏览器窗口不会共享的，即使是同一个浏览器的同一个页面。

两者拥有一些共同的方法：

window.localStorage.setItem(key,value);//设置指定key的数据（JSON格式）

window.localStorage.getItem(key);//获取指定key的数据

window.localStorage.removeItem(key);//删除指定key的数据

window.localStorage.clear();//清空所有的存储数据

window.sessionStorage.setItem(key,value);

window.sessionStorage.getItem(key);

window.sessionStorage.removeItem(key);

window.sessionStorage.clear();

二、如何测试

1、最简单的打开浏览器在console里直接输入测试(localStorage)

似懂非懂的localStorage和sessionStorage

在你没有执行removeItem和clear()之前浏览器的resources下是能够清楚的看到你所设置的值！即使你关闭该页面重新打开还是可以看到的。

似懂非懂的localStorage和sessionStorage

2、更好点的测试，简单封装(sessionStorage)

var KEY='todo';

var Store={

    save:function(items){

        return window.sessionStorage.setItem(KEY,JSON.stringify(items));

    },

    fetch:function(){

        return JSON.parse(window.sessionStorage.getItem(KEY)||'[]');

    }

}

var s={'name':'九成'};

Store.save(s);

var x=Store.fetch();

console.log(x);//输出：Object {name: "九成"}

似懂非懂的localStorage和sessionStorage

当你关闭该测试页面数据自动消失。

3、es6的

let NewKey='youType';

let object={

    save(items){

        return window.sessionStorage.setItem(KEY,JSON.stringify(items));

    },

    fetch(){

        return JSON.parse(window.sessionStorage.getItem(KEY)||'[]');

    }

};

object.save({'name':'JACK'});

let you=object.fetch();

console.log(you.name);//JACK

如果你更多见解请留下脚印.....

相关文章