个人笔记|给自己看的浏览器本地存储 - webStorage

webStorage

• 存储内容大小一般支持5MB左右(不同浏览器可能不同)
• 浏览器端通过Window.sessionStorage和Window.localStorage属性来实现本地存储机制。
  -SessionStorage存储的内容会随着浏览器窗口关闭而消失。
• LocalStorage存储的内容，需要手动清除才会消失。

localStorage

搜索的历史记录啊什么的一般都放在浏览器本地存储这里

可以在浏览器→检查→应用程序里看到 一般都有search作为关键字

在html中可配合JSON实现对浏览器本地存储的增删清查操作

浏览器关闭后仍然保存在本地

只有用户主动清除缓存时才会被清理

相关API

• 保存数据

  语法 localStorage.setItem('key', 'value')

  若'value'不是String类（如Number类 对象等） 会自动调用toString

  • 保存对象

    ==用JSON.stringify()==

    let p = {name : '张三', age : 18}
    function saveData () {
        localstorage.setItem ('person', JSON.stringify(p))
    }
    

• 读取数据

  语法 localStorage.getItem('key')

  • 读取对象

    ==用JSON.parse()==

    // 接上例
    function readData () {
        const result = localStorage.getItem('person')
        console.log(JSON.parse(result))
    }
    

  • xxxxxStorage.getItem(xxx)如果xxx对应的value获取不到，那么getltem的返回值是null

  • JSON.parse(null)的结果依然是null

• 删除数据

  语法 localStorage.removeItem('key')

• 清空数据

  语法 localStorage.clear()

sessionStorage

会话存储

浏览器关闭（会话结束）后不保存

其他的API跟localStorage一样