博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
javaScript存储
阅读量:4681 次
发布时间:2019-06-09

本文共 2235 字,大约阅读时间需要 7 分钟。

《1》
  1.document对象提供了的cookie
  2.Window对象提供了sessionStorage和localStorage两个存储对象来对网页的数据进行添加、删除、修改、查询操作。
  console.log(typeof(Storage) !== "undefined") //检测浏览器是否支持Storage存储
 
《2》三种数据存储方式,分别是:
  1.cookie
    a.主流浏览器都支持
    b.存储于访问者的计算机中的变量;
    c.每当同一台计算机通过浏览器请求某个页面时,就会发送这个 cookie
    d.注意测试需要在浏览器中服务请求才起作用,直接浏览器打开静态文件不起作用
  2.sessionStorage
    《IE8以上》 《会话存储》 用于临时保存同一窗口(或标签页)的数据,在关闭窗口或标签页之后将会删除这些数据
  3.localStorage
    《IE8以上》 《本地存储》 用于《长久保存整个网站》的数据,保存的数据《没有过期时间》,直到手动去除
 
《3》简单例子理解
  1.cookie
    设置cookie的形式:"cookieName1=cookie1^cookieName2=cookie2;expires=" + date
    cookie有一个关键字是expires,它是用来设置cookie的有效期的,默认情况(不设置expires)是当浏览器关闭的时候,自动清除cookie。
    注意设置多个cookie不要用“;”隔开,用 “^” 如上
    删除cookie
      把cookie的expires设置到过去(1970年1月1号) cookie就过期了
 
    修改cookie
      如document.cookie = "password=123;expires=" + date.toGMTString();
      再次请求遇到已经定义过的cookie(username),浏览器会自己修改原来储存的值;如果没有定义过,浏览器则会创建一个新的cookie。
    
                
 
  2.sessionStorage 和 localStorage
    对象属性:
      length : 返回存储对象中包含多少条数据。
 
    对象方法:
      key(n)   返回存储对象中第 n 个键的名称
      getItem(keyname)     返回指定键的值
      setItem(keyname, value)  添加键和值,如果对应的值存在,则更新该键对应的值。
      removeItem(keyname)  移除键
      clear()  清除存储对象中所有的键
      例子:
        localStorage.setItem("a",JSON.stringify({name:"xusanduo",token:"abcd123"}));
        var local = localStorage.getItem("a");
        console.log(JSON.parse(local))
        sessionStorage.setItem("session","sessionXusanduo")
        console.log(sessionStorage)
 
 
《4》联系与区别:
  相同点:都保存在浏览器端,同源的
  不同点:
    1.传递方式不同
      cookie数据始终在同源的http请求中携带(即使不需要),即cookie在浏览器和服务器间来回传递。
 
      sessionStorage和localStorage不会自动把数据发给服务器,仅在本地保存。
    2.数据大小不同
      cookie数据还有路径(path)的概念,可以限制cookie只属于某个路径下。
      存储大小限制也不同,cookie数据不能超过4k,同时因为每次http请求都会携带cookie,所以cookie只适合保存很小的数据,如会话标识。
 
      sessionStorage和localStorage 虽然也有存储大小的限制,但比cookie大得多,可以达到5M或更大。
    3.数据有效期不同
      cookie只在设置的cookie过期时间之前一直有效,即使窗口或浏览器关闭。
      sessionStorage:仅在当前浏览器窗口关闭前有效,自然也就不可能持久保持;
      localStorage:始终有效,窗口或浏览器关闭也一直保存,因此用作持久数据;
 
    4.作用域不同
      cookie也是在所有同源窗口中都是共享的。
      sessionStorage不在不同的浏览器窗口中共享,即使是同一个页面;
      localStorage 在所有同源窗口中都是共享的;
 
      Web Storage 支持事件通知机制,可以将数据更新的通知发送给监听者。
      Web Storage 的 api 接口使用更方便。

转载于:https://www.cnblogs.com/changxue/p/9297469.html

你可能感兴趣的文章
LeetCode - Best Time to Buy and Sell Stock
查看>>
java-Coculator
查看>>
499 单词计数 (Map Reduce版本)
查看>>
python笔记
查看>>
昨天用的流量有点多60M
查看>>
kafka中的消费组
查看>>
Golang的channel使用以及并发同步技巧
查看>>
【JDK源码分析】 String.join()方法解析
查看>>
【SICP练习】112 练习3.28
查看>>
python--注释
查看>>
前端资源链接 ...
查看>>
yum install ntp 报错:Error: Package: ntp-4.2.6p5-25.el7.centos.2.x86_64 (base)
查看>>
leetcode-Single Number-136
查看>>
CF715C Digit Tree
查看>>
二分法练习1
查看>>
QT 制作串口调试小助手----(小白篇)
查看>>
前端MVC实践之hellorocket——by张舒彤
查看>>
OptimalSolution(2)--二叉树问题(3)Path路径问题
查看>>
IPC 之 Messenger 的使用
查看>>
爱情八十六课,等得不是爱情
查看>>