LocalStorage以及SessionStorage的区别以及Storage与cookie的区别

1.LocalStorage的认识

它用于长久保存整个网站的数据，保存的数据没有过期时间，直到手动去删除。

调用方法：window.localStorage

 JavaScript提供localstorage的语法

        （1）增加一条localstorage数据

window.localStorage.setItem('key','value');

         （2）删除一条localstorage数据

window.localStorage.removeItem('key','value');

        （3）查看数据

 window.localStorage.getItem('key')

        （4）清空数据

window.localStorage.clear() 

 对于对象和数组,要加工成json再进行存储 

2.SessionStorage的认识

 它用于临时保存同一窗口(或标签页)的数据，在关闭窗口或标签页之后将会删除这些数据。

调用方法：window.sessionStorage

 JavaScript提供SessionStorage的语法

        （1）增加数据

window.sessionStorage.setItem('key','value');

         （2）删除数据

window.sessionStorage.removeItem('key','value');

        （3）查看数据

 window.sessionStorage.getItem('key')

        （4）清空数据

window.sessionStorage.clear() 

3. storage总结

浏览器的本地存储 - storage
        + localStorage 和 sessionStorage
        + 浏览器本地的存储
        + 特点:
          => 只能存储字符串类型
          => 如果你需要存储的是 对象或者数组 相关的内容
          => 转换为 json 格式存储

 4.Storage与cookie的区别

 1. 存储位置
          + cookie 以域名为基础存储(没有域名不能读写)
          + storage 以域名为基础存储(没有域名可以读写)
 2. 存储大小
          + cookie 4KB 左右
          + storage 20MB 左右
 3. 时效性
          => cookie  默认会话级别时效，浏览器关闭则销毁, 可以手动设置过期时间
          => localStorage   必然是永久存储
          => sessionStorage 必然是会话存储
 4. 前后端交互
          => cookie 会自动携带
          => storage 不会自动携带，Ajax的时候可以设置请求头
 5. 前后端操作
          => cookie   前后端都可以操作
          => storage  只能前端操作 js