JavaScript之本地存储使用

在前端我们有时候需要用到一些数据或者测试某些数据，但是我们不可能每次都需要向后端请求数据这时候我们可以使用前端本地存储方法来测试

本地存储特性：

1.数据存储在用户浏览器当中

2.设置，读取方便，甚至页面刷新不丢失数据

3.容量较大，sessionStorage大约5M，localStorage约20M

4.只能存储字符串，可以将对象json.stringify()编码后存储

第一种方式 window.sessionStorage 他的特性

1.生命周期为关闭浏览器窗口

2.在同一个窗口(页面)下数据可以共享

3.以键值对的形式存储使用

代码如下：

  // 存储数据
sessionStorage.setItem(key, value)// 获得数据
sessionStorage.getItem(key)// 删除数据
sessionStorage.removeItem(key)// 清除所有数据sessionStorage.clear()

第二种方式：window.localStorage 他的特性

1.生命周期永久生效，除了我们手动删除否则关闭页面(浏览器)也会存在 (注意：仅限相同浏览器)

2.可以多个窗口或者不同的页面共享(也是必须相同浏览器)

3.以键值对的形式进行存储使用

代码如下：

 // 存储数据
localStorage.setItem(key, value)// 获得数据localStorage.getItem(key)// 删除数据localStorage.remove(key)// 清除所有数据
localStorage.clear()

JavaScript之本地存储使用相关推荐

javascript 实现本地存储
我们先完成一个本地存储的DB类. db = function() { var store = window.localStorage, doc = document.documentElement; ...
JavaScript的本地存储和会话存储
Storage 1 认识Storage WebStorage主要提供了一种机制,可以让浏览器提供一种比cookie更直观的key.value存储方式 : localStorage:本地存储,提供的是一 ...
JavaScript之本地存储
文章目录前言本地存储本地存储特性一.目标二.主要学习内容 1. window.sessionStorage 1.1 sessionStorage的特性 1.2 sessionStorage的 ...
本地存储(Local Storage) 和会话存储(Session Storage)
我不会告诉你任何定义和概念,上车,读完这篇博客,你就会对本地存储(Local Storage) 和会话存储(Session Storage)有一个清晰的认识. 目录前提知识范例示例1:将键值对 ...
性能：15个JavaScript本地存储技术的函数库和工具
当构建更复杂的JavaScript应用程序运行在用户的浏览器是非常有用的,它可以在浏览器中存储信息,这样的信息可以被共享在不同的页面,浏览会话. 在最近的过去,这将有可能只被cookies文本文件保存 ...
JavaScript本地存储
sessionStorage 同一个窗口本地存储信息先设置数据 sessionStorage.setItem('username','张三'); sessionStorage.setItem('ag ...
详解Javascript本地存储的方式、区别及应用场景
详解Javascript本地存储的方式.区别及应用场景一.方式 javaScript本地缓存的方法我们主要讲述以下四种: cookie sessionStorage localStorage ind ...
Javascript本地存储的方式有哪些？区别及应用场景？
# 一.方式 javaScript本地缓存的方法我们主要讲述以下四种: cookie sessionStorage localStorage indexedDB # cookie Cookie,类型为 ...
JavaScript——本地存储用户名存储案例
一.本地存储 1.1 本地存储特性 1.数据存储在用户浏览器中 2.设置.读取方便.甚至页面刷新不丢失数据 3.容量大,sessionStorage约5M.localStorage约2 ...

JavaScript之本地存储使用

JavaScript之本地存储使用相关推荐

最新文章

热门文章