首页技术正文

似懂非懂的localStorage和sessionStorage

开发者翌耀技术 2022年11月7日

0 收藏 984 点赞 794 浏览 1335 个字

一、区别

相信很多人都见过这两个关于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)

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

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: "九成"}

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

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

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