sessionStorage，localStorage，cookie用法与区别

最新推荐文章于 2024-07-24 23:00:08 发布

万物可爱_85

最新推荐文章于 2024-07-24 23:00:08 发布

阅读量185

点赞数

文章标签：前端 javascript java

本文链接：https://blog.csdn.net/hnn567/article/details/128221317

版权

localStorage,sessionStorage用法

基础介绍
Localstorage、sessionStorage、cookie 的区别
项目应用

基础介绍

html5 中的 web Storage 包括了两种存储方式：sessionStorage 和 localStorage
共同点
存储大小为5MB，都保存在客户端，不与服务器进行交互通信，有相同的Web API

sessionStorage、localStorage区别
localStorage 存储持久数据，浏览器关闭后数据不丢失除非主动删除数据；

sessionStorage 数据在当前浏览器窗口关闭后自动删除。

因此sessionStorage 和 localStorage 的主要区别在于他们存储数据的生命周期，sessionStorage 存储的数据的生命周期是一个会话，而 localStorage存储的数据的生命周期是永久，除非主动删除数据，否则永远不会过期

Web Storage API
localStorage 和 sessionStorage 有着统一的API接口，下面以sessionStorage为例介绍一下 API 接口使用方法

添加键值对
setItem(key,value)：为指定key值设置一个对应的value值
除了使用setItem方法，还可以使用sessionStorage.key = value或者sessionStorage[‘key’] = value这两种形式。

// 把name值存储到name的键上

sessionStorage.setItem(‘name’, ‘jacky’); // 法1
// sessionStorage.name = ‘jacky’; // 法2
// sessionStorage[‘name’] = ‘jacky’; // 法3

添加数组和对象
需要注意的是key和value值必须是字符串形式的，如果不是字符串，会调用它们相应的toString()方法来转换成字符串再存储。

所以要存储数组或对象时，应先转换成字符串格式（如JSON格式）再进行存储，使用JSON.stringify(obj)方法
var obj = {
name: ‘jacky’,
age: 22
};

sessionStorage[‘person’] = JSON.stringify(obj);

//sessionStorage[‘person’] = obj; 不能这样存储，这样存进去结果是"[object Object]"
存进去之后则为字符串格式
“{“name”:“jacky”,“age”:22}”

需要拿出来使用的时候则使用JSON.parse()方法将JSON字符串转换为对象
var person = JSON.parse(sessionStorage[‘person’])

！！！同理，数组也是这个用这个方法进行存储。

getItem（key）：根据指定的key值获取对应的value值
和setItem一样，getItem也有两种等效形式,value = sessionStorage.key和value = sessionStorage[‘key’]。获取到的 value 值是字符串类型，如果需要其他类型，需要自己做类型转换。

// 获取存储到 name 的键上的值
var name = sessionStorage.getItem(‘name’);
// var name = sessionStorage.name;
// var name = sessionStorage[‘name’];

removeItem（key）：删除指定的key值对应的value值
注意localStorage 没有数据过期的概念，所有数据如果失效了，需要开发者手动删除。

var name = sessionStorage.getItem(‘name’); // “jacky”
sessionStorage.removeItem(‘name’);
name = sessionStorage.getItem(‘name’); // null
clear()：删除所有存储的内容
它和removeItem不同的地方是removeItem删除的是某一项，而clear是删除所有。

// 清除 localStorage
sessionStorage.clear();
var len = sessionStorage.length; // 0
//length属性用于获取 sessionStorage 中键值对的数量。
key(index)：在指定的数字位置获取该位置的名字

需要注意的是赋值早的键值对应的索引值大，赋值完的键值对应的索引小,key方法可用于遍历 sessionStorage 存储的键值。
sessionStorage.setItem(‘name’,‘jacky’);
var key = sessionStorage.key(0); // ‘name’
sessionStorage.setItem(‘age’, 10);
key = sessionStorage.key(0); // ‘age’
key = sessionStorage.key(1); // ‘name’

两者应用场景

sessionStorage应用场景
进行页面传值

localStorage应用场景
适合长期保存在本地的数据
可以用于存储该浏览器对该页面的访问次数

原文链接: https://zhuanlan.zhihu.com/p/92947594

Localstorage、sessionStorage、cookie 的区别

共同点：都是保存在浏览器端的，且同源的。

区别：
1.cookie数据始终携带在同源的http请求中，即cookie在浏览器和服务器间来回传递，而sessionStorage和Localstorage不会自动把数据发送给服务器，只在本地保存。cookie数据还有路径（path）的概念，可以限制cookie只属于某个路径下。

2.存储大小限制也不同，cookie数据不能超过4k，同时因为每次http请求都会携带cookie，所有cookie只适合保存很小的数据。如会话标识。sessionStorage和Localstorage虽然也有大小储存的限制，但比cookie大很多。可以达到5M或更大。

3.数据有效期不同，sessionStorage，仅在当前浏览器窗口关闭之前有效，Localstorage始终有效，窗口或者浏览器关闭也一直保存，除非手动删除，cookie只在设置的cookie过期时间之前有效，即使窗口关闭或浏览器关闭。

4.作用域不同，sessionStorage不能在不同的浏览器中共享，即使是同一个页面，locastorage在所有的同源窗口中都是共享的，cookie也是在所有同源窗口中共享的。

5.web Storage支持事件通知机制，可以将数据更新的通知发送给监听者。

6.web storage 的api接口使用更方便。

二、H5的浏览器储存有哪些？
1.cookie
cookie自身有一个过期属性，并且在每次的通信过程中会传送向服务端。
2.localStorage、sessionStorage
-localStorage：永久储存，除非手动删除就一直存在。
-sessionStorage：只存在一个页面周期内，页面关闭就清除了。
3.indexedDB
内嵌在浏览器端的非关系型数据库，数据以键值对的形式存储，兼容性良好 indexDB 直接操作的存储对象是 ObjectStore，这有点类似其他数据库中 table 概念。
4.websql
内嵌在浏览器的关系型数据库，前端可以像在使用 mysql、Oracle 一样的写 sql 语句，并存储信息。兼容性良好。存储后可在浏览器 resource 中查看
5.window变量
生命周期有限，一般不使用，常用于全局变量的临时储存。
原文链接：https://blog.csdn.net/Wujunbin952/article/details/125588490

项目应用

localStorage : 是永久性存储 ----所以我应用在【登录时-记住密码模块】
此模块在另一篇文章提及：https://editor.csdn.net/md/?articleId=128201785

sessionStorage：是临时性存储 -----所以我应用在【刷新页面时保持分页不变模块】
在这里插入图片描述
需求是：分页选中limit 和curr后，刷新页面分页不变，不跳转
思路： 1：在分页跳转回调中sessionStorage存储数据
2：在页面加载后，把参数传给获取页面数据函数query

function query(obj) {
    var limit = obj.limit;
    var curr = obj.curr;
        $.post("/query/xxxx", {
            curr: curr,
            limit: xx,
            id: xx,
        }, function (res) {
            laypage.render({
                elem: 'page'
                , count: total
                , limit: limit
                , curr: curr
                , layout: ['prev', 'page', 'next', 'count', 'limit']
                // , jump: query
                ,jump: function(obj, first){
                    limitParam=obj.limit;
                    currParam=obj.curr;
                    //存储--刷新时使用
                    sessionStorage.setItem("limitRefresh",limitParam)
                    sessionStorage.setItem("currRefresh",currParam)
                    if(!first){
                        query({limit: obj.limit, curr: obj.curr});
                    }
                }
            });
        })

}

//定义当前页面--分页参数--用于传参给其他页面
var limitParam='';
var currParam='';

//通过url接收到其他页面的参数
var limitR=sessionStorage.getItem("limitRefresh")
var currR=sessionStorage.getItem("currRefresh")
var limitChild=getUrlParam('limitChild') ? getUrlParam('limitChild') : limitR ? limitR : 20;
var currChild=getUrlParam('currChild') ? getUrlParam('currChild') : currR ? currR :1;
 query({limit: limitChild, curr: currChild});


//获取url中的参数---这里有其他页面传过来的url
function getUrlParam(name) {
    var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
    var r = window.location.search.substr(1).match(reg);  //匹配目标参数
    if (r != null) return unescape(r[2]); return null; //返回参数值
}