常见的浏览器存储方法(cookie、localStorage、sessionStorage)

时间：2021-08-24 来源：互联网编辑：宝哥软件园浏览：次

今天，我们从前端的角度来看浏览器存储。有两种常用的存储方法：cookie、网络存储(localStorage和sessionStorage)。让我们一个一个地了解他们。

Cookie基于HTTP规范，用于识别用户。

Cookie是服务器发送给浏览器的一小段数据，下次浏览器向同一服务器发出请求时会携带并发送给服务器。

在Cookie诞生之初，它被用来解决HTTP的无状态请求，记录一些用户的相关状态。

会话状态管理(如用户登录状态、购物车、游戏分数或其他需要记录的信息)个性化设置(如用户自定义设置、主题等。)浏览器行为跟踪(如跟踪分析用户行为等。)

由于一些前端交互需求，cookie也用于存储一些客户端数据。

Cookie的原生api不友好，需要自己封装。以下是封装后的方法。

创建cookie

/* * * @ description js native setting cookie * @ param { String } name给你一个你想设置的cookie的名称(key)* @ param { String } value cookie的具体内容(value)* @ param { String } Expiredays以天为单位设置cookie的过期时间*/function setcookie (name，value，expired days){ var exdate=new date()；ex date . SetDate(ex date . GetDate())expire days；document . cookie=name '=' escape(value)((expiredays==null)？'' : ';expires=' ex date . TogMTString())；}获取饼干

/*** @description js原生cookie获取方法1* @param {String}想要获取的名称cookie名称*/function get cookie(name){ if(document . cookie . length 0){ var start=document . cookie . index of(name '=')；如果(开始！==-1){ start=start name . length 1；var end=document . cookie . indexof('；'，开始)；if(end===-1){ end=document . cookie . length；返回unescape(document . cookie . substring(start，end))；} } }返回“”；}/*** @description js原生cookie获取方法2* @param {String}名称要获取的cookie名称*/function get cookie(name){ var cookie arr=document . cookie . split('；') || [];if(！cookier . length){ return“”；} for(var I=0；我喜欢烹饪。i ){var key=$。修剪(烹饪学习[i])。split('=')[0]；var值=$。修剪(烹饪学习[i])。split('=')[1]；if(key===name){返回值；}}}检查cookie是否已经存在

函数CheckCookie(){ username=GetCookie(' username ')；if(用户名！==空用户名！==' '){警报('再次欢迎'用户名'！');} else {username=prompt('请输入您的姓名： '，' ')；if(用户名！==空用户名！=='') {setCookie('username '，username，365)；}}}由jquery.cookie.js封装的cookie设置方法：

创建cookie

/*** 'name '，cookie名称* 'value '，cookie值* {* expires: 7，//cookie有效期天数；默认值：会话cookie，关闭浏览器cookie无效。* path:'/'，//受cookies影响的路径；值“/”表示设置cookie在整个域中都可用；默认值：创建cookie的页面路径。* domain: 'example.com '，//定义cookie有效的域。默认值：创建cookie的页面域。* secure: false，//定义cookie安全性。默认值为false。如果设置为true，则cookie在http中无效，cookie的传输需要使用安全协议(https)。* }*/$.cookie('name '，' value '，{ expires: 7，path: '/'，domain: 'example.com '，secure : false })；阅读cookie

$.cookie('名称')；//name存在并返回相应的值，但不存在并返回null

阅读所有可用的cookies:

$.cookie()；//{“name”:值}

TODO:直接调用会报告错误吗？

删除cookie

//成功删除cookie时返回true，否则返回false$。removeCookie('名称')；//=true$。remove CooKie(' nothing ')；//=false注意：删除cookie时，您必须传递完全相同的路径、域和安全选项来设置cookie，除非您依赖默认选项。

也就是说，如果在设置cookie时设置了路径属性或安全属性，那么在删除cookie时应该取这些属性，否则cookie无法成功删除。

//这样不行！$.removeCookie('名称')；//=false//这样就行了！$.removeCookie('name '，{ path : '/' })；//=truetodo: $。removecookie无效？(jquery1.9.1.js jquery.cookie.js，插件没有重复引用，$。removeCookie提示未定义)