JS-本地存储

8次阅读
没有评论

共计 748 个字符,预计需要花费 2 分钟才能阅读完成。

本地储存特性

随着互联网的快速发展,基于网页的应用越来越普遍,同时也变得越来越复杂,为了满足各种各样的需求,会经常性在本地存储大量的数据,HTML5规范提出了相关解决方法

  1. 数据储存在用户浏览器中
  2. 设置、读取方便、甚至页面刷新不丢失数据
  3. 容量较大,sessionStroage 和 localStorage 约 5M 左右

localStorage

  1. 生命周期永久生效,除非手动删除否则关闭页面也会存在
  2. 可以多窗口(页面)共享(同一浏览器可以共享)
  3. 以键值对的形式存储使用

储存数据:

    localStorage.setItem(key, value)

获取数据:

    localStorage.getItem(key)

删除数据:

    localStorage.removeItem(key)

删除所有数据:

    localStorage.clear()

储存复杂数据类型(引用数据类型):

本地只能存储字符串,无法储存复杂数据类型,需要将复杂数据类型转换成JSON字符串,再存储到本地

    // JSON 属性和值都是双引号进行包含
    {"uname":"Joe","age":18,"sex":"男"}

JSON.stringify(复杂数据类型)

  • 将复杂数据转换成JSON字符串 存储 本地存储中
        // 复杂数据类型一定要转换为JSON字符串再进行储存
        localStorage.setItem('obj', JSON.stringify(obj))

JSON.parse(JSON字符串)

  • 将JSON字符串转换成对象 取出 时候使用
        // 将JSON字符串转换为对象
        JSON.parse(localStorage.getItem('obj'))
JS-本地存储

sessionStorage

  1. 生命周期为关闭浏览器窗口
  2. 在同一个窗口(页面)下数据可以共享
  3. 以键值对的形式存储使用
  4. 用法跟 localStorage 基本相同

正文完
 0
qiaofugui.cn
版权声明:本站原创文章,由 qiaofugui.cn 于2024-05-20发表,共计748字。
转载说明:除特殊说明外本站文章皆由CC-4.0协议发布,转载请注明出处。
评论(没有评论)
验证码