window-sessionStorage-localStorage-web临时变量的保存

news2024/9/9 0:15:31

文章目录

1.sessionStorage
2.localStorage
- 2.1.使用技巧
- 2.2.注意事项
3.总结

1.sessionStorage

sessionStorage 属性允许你访问一个，对应当前源的 session Storage 对象。它与 localStorage 相似，不同之处在于 localStorage 里面存储的数据没有过期时间设置，而存储在 sessionStorage 里面的数据在页面会话结束时会被清除。

页面会话在浏览器打开期间一直保持，并且重新加载或恢复页面仍会保持原来的页面会话。
在新标签或窗口打开一个页面时会复制顶级浏览会话的上下文作为新会话的上下文，这点和 session cookie 的运行方式不同。
打开多个相同的 URL 的 Tabs 页面，会创建各自的 sessionStorage。
关闭对应浏览器标签或窗口，会清除对应的 sessionStorage。

// 保存数据到 sessionStorage
sessionStorage.setItem("key", "value");

// 从 sessionStorage 获取数据
let data = sessionStorage.getItem("key");

// 从 sessionStorage 删除保存的数据
sessionStorage.removeItem("key");

// 从 sessionStorage 删除所有保存的数据
sessionStorage.clear();

2.localStorage

只读的localStorage 属性允许你访问一个Document 源（origin）的对象 Storage；存储的数据将保存在浏览器会话中。localStorage 类似 sessionStorage，但其区别在于：存储在 localStorage 的数据可以长期保留；而当页面会话结束——也就是说，当页面被关闭时，存储在 sessionStorage 的数据会被清除。

应注意，无论数据存储在 localStorage 还是 sessionStorage ，它们都特定于页面的协议。

另外，localStorage 中的键值对总是以字符串的形式存储。 (需要注意，和 js 对象相比，键值对总是以字符串的形式存储意味着数值类型会自动转化为字符串类型).

localStorage.setItem("myCat", "Tom");
let cat = localStorage.getItem("myCat");
localStorage.removeItem("myCat");
// 移除所有
localStorage.clear();

//set方法
// 自身方法
localStorage.setItem("name","bonly");
// []方法
localStorage["name"]="bonly";
// .方法
localStorage.name="bonly";

//get方法
// 自身方法
localStorage.getItem("name");
// []方法
localStorage["name"];
// .方法
localStorage.name;

//remove方法
// 自身方法
localStorage.removeItem("name");
// []方法
delete localStorage["name"];
// .方法
delete localStorage.name

//所有值
localStorage.valueOf();//取出所有的值
localStorage.clear();//清除所有的值

//判断是否具有某个key，hasOwnProperty方法
localStorage.hasOwnProperty("name")
// 如果存在的话返回true，不存在返回false

2.1.使用技巧

先判断浏览器是否支持localStorage，通过if(!window.localStorage) return;
单词太长，不方便书写，可以利用 var storage=window.localStorage;
字符串和原始类型需要通过JSON.stringfy转字符串，通过JSON.parse转成对象
通过封装方法实现来回转化

2.2.注意事项

localStorage特定于页面的协议，不是同一域名，不能访问。
有长度限制，5M左右，不同浏览器大小会有不同。
生命周期是永久的，但是数据实际是存在浏览器的文件夹下，可能卸载浏览器就会删除。
浏览器可以设置是否可以访问数据，如果设置不允许会访问失败。
兼容IE8以上浏览器
只能存储字符串类型，需要转成字符串存储。