网络: WebStorage本地存储

Cookie也可以存储，为什么要使用Storage?

1. Cookie大小限制在4k，而Storage有5M的容量。
2. Cookie需要发送到服务器交互，如果数据仅是本地使用的话，会占用带宽；而Storage不会。

分类:

sessionStorage 临时存储 浏览器关闭存储结束

localStorage 永久存储 除非用户手动删除

基础存取:

        // 存 需要使用字符串包围
localStorage.username = "fanghuayong";
    var obj = {
        name: "fanghuayong"
    }
localStorage.obj = JSON.stringify(obj)

// 加入这个没有使用字符串包括，在localstorage中显示的是Obj:Obj
localStorage.obj1 = {
    name: "lizhuli"
}
 
 // 取
 var str = JSON.parse(localStorage.obj);
 console.log(str)

      

API：

localStorage.setItem('id',12345)

// 存值

localStorage.getItem('id')

// 取值

localStorage.removeItem('id')

// 清理选择的项

localStorege.clear();

// 清理全部的项

        localStorage.setItem('user1', 'fanghuayong')
var str = localStorage.getItem('user1')
console.log(str)

      

作用域:

localStorage->文档源限制

sessionStorage->文档源限制+窗口

用途:

离线存储，比如断网的时候可以做一些简单的操作。或者比如当前视频播放的位置，下次观看可以接着从这里看。