JavaScript本地存储的方式有哪些

Web存储技术

1. localStorage

• 特点：长期存储，除非手动删除否则会一直保存在浏览器中，清除缓存或卸载浏览器后消失。
• 存储语法：window.localStorage.setItem(名字,值)
• 获取语法：window.localStorage.getItem(名字)
• 删除语法：window.localStorage.removeItem(名字)
• 作用：删除localStorage中的数据。
• 限制：只能保存字符串类型的数据。
• 应用场景：适用于存储不需要跨会话访问的数据，如用户偏好设置、游戏进度等。

2. sessionStorage

• 特点：会话存储，浏览器关闭后数据消失，可以跨页面通讯，但仅限于本页面跳转。
• 存储语法：window.sessionStorage.setItem(名字,值)
• 获取语法：window.sessionStorage.getItem(名字)
• 删除语法：window.sessionStorage.removeItem(名字)
• 应用场景：适用于存储会话级别的数据，如用户在会话期间的浏览记录。

3. Cookie

• 特点：存储字符串，大小限制约4KB，存储时效性默认为会话级别，可手动设置过期时间。
• 操作必须依赖服务器：本地打开的页面不能操作cookie。
• 存储语法：document.cookie = 'key=value';
• 获取语法：document.cookie
• 应用场景：常用于识别用户身份，如登录信息的存储。

4. IndexedDB

• 特点：低级API，用于存储大量结构化数据，包括文件/ blobs。
• 优点：存储量理论上无上限，操作异步，支持存储JS对象。
• 缺点：操作繁琐，有门槛。
• 应用场景：适用于存储大量数据，如在线游戏的存档、网页应用的数据库等。