【面试题-浏览器】请描述 cookies , sessionStorage 和 localStorage 的区别？

代码caigou~旺旺旺

已于 2022-11-16 23:56:59 修改

阅读量138

点赞数

分类专栏：常见面试题文章标签： javascript 前端开发语言面试题

于 2022-11-16 23:56:49 首次发布

本文链接：https://blog.youkuaiyun.com/ZMN0057/article/details/127895874

版权

常见面试题专栏收录该内容

5 篇文章

订阅专栏

本文详细介绍了Web存储的三种方式：localStorage、sessionStorage和cookie。localStorage提供持久化的本地存储，数据不会过期；sessionStorage仅在同会话内有效，数据随会话结束而消失；cookie则限制在4KB大小内，每次请求都会发送，适合存储小量必要信息。文章通过示例代码展示了这三种存储方式的使用方法，包括保存、读取、清除数据的操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

web storage：

不同的浏览器不同，一般是10MB。常用setItem,getItem,removeItem,clear等。

sessionStorage :

用于本地存储一个会话中的数据，这些数据只有在同一个会话中的页面才能访问并且当会话结束时数据也随之销毁。因此是一种非持久化的本地存储，仅仅是会话级别的存储。

//保存数据有3种方法：
sessionStorage.setItem("key","value");
sessionStorage.key="value";
sessionStorage["key"]="value";
//读取数据的3种方法，将数据赋值给变量
var v=sessionStorage.getItem("key");
var v=sessionStorage.key;
var v=sessionStorage["key"];
// 清除指定数据
sessionStorage.removeItem("key")
// 清除所有数据
sessionStorage.clear()

localStorage

用于持久化的本地存储，除非主动删除数据，否则数据时永远不会过期的。

//保存数据有3种方法：
localStorage.setItem("key","value");
localStorage.key="value";
localStorage["key"]="value";
//读取数据的3种方法，将数据赋值给变量
var v=localStorage.getItem("key");
var v=localStorage.key;
var v=localStorage["key"];
// 清除指定数据
localStorage.removeItem("key")
// 清除所有数据
localStorage.clear()

cookies

存储数据的大小受限，不同的浏览器不同，一般不会超过4kb,并且每次请求一个新页面的时候，cookie都会被发送过去，无形中浪费了宽带，例外cookie还需要指定作用域，不可以跨域调用。

function Setcookie (name, value){ 
    //设置名称为name,值为value的Cookie
    var expdate = new Date();   //初始化时间
    expdate.setTime(expdate.getTime() + 30 * 60 * 1000);   //时间单位毫秒
    document.cookie = name+"="+value+";expires="+expdate.toGMTString()+";path=/";
 
   //即document.cookie= name+"="+value+";path=/";  时间默认为当前会话可以不要，但路径要填写，因为JS的默认路径是当前页，如果不填，此cookie只在当前页面生效！
}

function getCookie(c_name){
//判断document.cookie对象里面是否存有cookie
if (document.cookie.length>0){
  c_start=document.cookie.indexOf(c_name + "=")
	//如果document.cookie对象里面有cookie则查找是否有指定的cookie，如果有则返回指定的cookie值，如果没有则返回空字符串
  if (c_start!=-1){ 
    c_start=c_start + c_name.length+1 
    c_end=document.cookie.indexOf(";",c_start)
    if (c_end==-1) c_end=document.cookie.length
    return unescape(document.cookie.substring(c_start,c_end))
    } 
  }
return ""
}