localStorage

持久存储,一旦存储永久存在

只能存储基本数据类型(一般为字符串),不能存储其他数据类型

1.增

   window.localStorage.setItem(key, value)
   window.localStorage.setItem('qq', '8888888')
复制代码

2.查

          window.localStorage.geyItem(key)
          var qq = window.localStorage.getItem('qq')
          var abc = window.localStorage.getItem('abc')
          console.log(qq)//打印值为'8888888'
          console.log(abc)//因为没有对应的key所以打印值为null
复制代码

3.删除一条

          window.localStorage.removeItem(key)
          window.localStorage.setItem('qq', '8888888')
          window.localStorage.setItem('qq1', '8888888')
          window.localStorage.removeItem('qq')//再打开的控制台时只会有qq1
复制代码

4.清空

        window.localStorage.clear()//
复制代码

5.可以跨页面通讯

sessionStorage

临时存储,关闭浏览器后存储内容自动消失

1.增

          window.sessionStorage.setItem(key, value)
          window.sessionStorage.setItem('wx', '12540a')
复制代码

2.查

          window.sessionStorage.geyItem(key)
          var wx = window.sessionStorage.geyItem('wx')
          var abc = window.sessionStorage.geyItem('abc')
          console.log(wx)//打印值为'12540a'
          console.log(abc)//因为没有对应的key所以打印值为null
复制代码

3.删除一条

          window.sessionStorage.removeItem(key)
          window.sessionStorage.setItem('qq', '8888888')
          window.sessionStorage.setItem('qq1', '8888888')
          window.sessionStorage.removeItem('qq')//再打开的控制台时只会有qq1
复制代码

4.清空

          window.sessionStorage.clear()
复制代码

5.如果想跨页面通讯,必须是通通过本页面跳转的

cookie

特点:

1.只能存储字符串, 并且有固定的格式

key1 = value;key = value; ...
复制代码

2.存储大小有限(大约为4k)

3.存储有时效性

默认是会话级别失效(即关闭网页后失效),但是可以手动设置过期时间

4.操作必须依赖服务器

1.本地打开页面不能操作cookie

2.要求页面必须在服务器打开

5.跟随前后端请求自动携带

1.只要在cookie空间中有内容时

2.会在该页面和后端交互的过程自动携带

6.前后端操作

1.前端只能通过js来操作cookie

2.后端所以有语言都可以操作

7.存储依赖域名

1.哪一域名存储,哪一域名使用

2.不能跨域名使用

设置cookie

语法

  document.cookie = 'key=value'
  document.cookie = 'qq=12306'
复制代码

设置一个有过期时间的cookie

语法

  var timer = new Date()//设置的过期时间
  document.cookie = 'key=value;expires=' + timer
复制代码

注意:cookie在设置的时候会按世界标准时间来进行 北京时间是东八区时间所以要比标注时间快八小时要减去

storage:localStorage与sessionStorage的统称

cookie与storage的区别

1.出现时间

cookie:有js时就存在

storage:h5出现时才有

2.存储大小

cookie:4k左右

storage:20M左右

3.前后端交互

cookie:会跟随页面请求自动携带

storage:不会跟随请求自动携带

4.过期时间

cookie:默认会话级别,可以手动调节

storage:不能手动操作

5.前后端操作

cookie:前后端都可以操作

storage:只能js操作

localStorage与sessionStorage的区别

1.过期时间

local:永久1储存,除非手动删除

session:临时存储

2.跨页面通讯

local:直接跨页面通讯

session:只能是当前窗口(页面)跳转才能通讯

3.共同点

只能存储字符串,不能存储复杂数据类型