Cookie、离线缓存、localStorage、sessionStorage

最新推荐文章于 2022-08-04 13:59:10 发布

正义同學

最新推荐文章于 2022-08-04 13:59:10 发布

阅读量284

点赞数 4

分类专栏： JavaScript 文章标签： cookie 离线缓存 localStorage sessionStorage JS存储

本文链接：https://blog.youkuaiyun.com/weixin_45471827/article/details/98875140

版权

本文介绍了Web存储技术，包括Cookie、session、离线缓存、localStorage和sessionStorage。Cookie存储在客户端，适用于存储非敏感信息；session存储在服务器端，适合存储敏感数据。离线缓存允许在线时缓存文件以备离线使用。localStorage和sessionStorage提供本地存储，前者永久存储，后者会话结束后销毁。同时，文章提及了indexedDB和webSQL两种浏览器数据库。

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

存储：由于HTTP协议它是一个无状态协议（每次http交互时无法携带一些用户身份标识），这时候就需要使用web存储；

经常会被存储的数据:用户基本数据(包括登录标识) ,访问记录,偏好设置或者一些静态资源文件(长期不需要更新的文件）；

1、Cookie

存储位置：存储在客户端（前后端都可操作）；
存储空间：单个cookie存储空间上限4KB以内；每个站点存储的cookie数量不超过20个（因浏览器而异）；一个浏览器存储的cookie数量上限为300个；
跨域访问：“同源策略”限定不能跨域访问cookie；
生存周期：cookie在所设置的存活周期内一直存在（如果没设置存活周期，浏览器关闭立即销毁），就算关闭浏览器也没有影响；
安全性：较低，在客户端经常也会被一些恶意的脚步劫持XSS（跨站脚本攻击），所以一般用来存储机密性不高的数据；

设置Cookie：

var end=new Date().getTime()+30*24*60*60*1000;		//30天后的时间戳

/*Name为键，Value为键值，Domain设置二级域名，Path路径”/”代表当前，Expires设置结束时间*/

document.cookie="Name=Value;Domain=localhost;Path=/;Expires="+end;

删除Cookie：
Expires设置结束时间为-1即可
封装一个写入Cookie方法：

//封装一个写入cookie的方法 , 记住:存入或取的数据都是字符串
   function setCookie(key,data,expires,path){
   
       //判断数据,如果是对象类型数据,需要转换成JSON字符形式存储
       if(typeof data == 'object'){
   
           data = JSON.stringify(data);
       }
       <

最低0.47元/天解锁文章