cookie

113 阅读2分钟

什么是cookie

他是存储在本地的数据的片段(通过APPlication查看存储的coolie)

locaiStorage

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

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

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

语法

myStorage = localStorage;

sessionStorage

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

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

备注:  应该注意,存储在 sessionStorage 或 localStorage 中的数据特定于页面的协议。也就 是说 http://example.com 与 https://example.com 的 sessionStorage 相互隔离。

被存储的键值对总是以 UTF-16 DOMString 的格式所存储,其使用两个字节来表示一个字符。对于对象、整数 key 值会自动转换成字符串形式。

语法

sessionStorage.setItem('myCat', 'Tom');

cookie介绍

1.cooke默认会话期有效,浏览器关闭后自动删除

2.cookie存储数据大小在4KB左右存储的数据在150条ocalStoeage存储数据在5M左右条数不限

locaiStorage 和### sessionStorage的区别

1.数据有效期是不一样的,前者默认永久有效,后者存续(会话期)有效

2.cookie会随着http请求发送给服务器送给服务端,而loclStorage不会

3.cookie的增删改查操作相对来说比较暗麻烦

cookie的用法

增删改查
    document.cookie = "username=admin";//默认会话有效期   
        let oDate=new Date();
        oDate. setDate(oDate .getDate() + 7);//cookie的有效期默认七天
        docunment.cookie = "a=1;expires=" + oDate;
     //增
     document.cookie = "b=a"
     //设置路径
     document.coolie=存储的路径;
     //取cookie
     console.log(document.cookie);
     //将他转为数组
     let str = documen.cookie;
     let srr = ste.split(";")
     console.log(arr);
     arr.forEach((item)>={
     let brr = item.split("=")
     if (brr[0] == "d"){
     
     consol.log(brr[1]
       }
     });
     //删cookie
     let oDte = new Date();
     oDate.setDate(oDate.getDate() -1);
     document.coolie = "a=1;expires=" + oDate;