JavaScript本地储存:localStorage、sessionStorage、cookie的使用

javaScript有三种数据存储方式,分别是:

  • sessionStorage
  • localStorage
  • cookier

1. sessionStorage

  • sessionStorage仅在当前会话下有效,关闭页面或浏览器后被清除;
  • setItem(key,value) 设置数据
  • getItem(key) 获取数据
  • removeItem(key) 移除数据
  • clear() 清除所有值
<script>
  // 添加数据
  window.sessionStorage.setItem("name","李四")
  window.sessionStorage.setItem("age",18)
  // 获取数据
  console.log(window.sessionStorage.getItem("name")) // 李四
  // 清除某个数据
  window.sessionStorage.removeItem("gender")
  // 清空所有数据
  window.sessionStorage.clear()
</script>

2. localStorage

  • localStorage 是 HTML5 标准中新加入的技术,用于长久保存整个网站的数据,保存的数据没有过期时间,直到手动去删除;
  • localStorage和sessionStorage最大一般为5MB,仅在客户端(即浏览器)中保存,不参与和服务器的通信;
  • setItem(key,value) 设置数据
  • getItem(key) 获取数据
  • removeItem(key) 移除数据
  • clear() 清除所有值
<script>
  // 添加数据
  window.localStorage.setItem("name","张三")
  window.localStorage.setItem("age",20)
  window.localStorage.setItem("gender","男")
  // 获取数据
  console.log(window.localStorage.getItem("name")) // 张三
  // 清除某个数据
  window.localStorage.removeItem("gender")
  // 清空所有数据
  window.localStorage.clear()
</script>

3. cookier

简介
Cookie 是一些数据, 存储于你电脑上的文本文件中,用于存储 web 页面的用户信息
Cookie 数据是以键值对的形式存在的,每个键值对都有过期时间。如果不设置时间,浏览器关闭,cookie就会消失,当然用户也可以手动清除cookie
 Cookie每次都会携带在HTTP头中,如果使用cookie保存过多数据会带来性能问题
Cookie内存大小受限,一般每个域名下是4K左右,每个域名大概能存储50个键值对

基本操作
 通过访问document.cookie可以对cookie进行创建,修改与获取。
 默认情况下,cookie 在浏览器关闭时删除,你还可以为 cookie的某个键值对 添加一个过期时间
 如果设置新的cookie时,某个key已经存在,则会更新这个key对应的值,否则他们会同时存在cookie中

<script>
  // 设置cookie
  document.cookie = "username=orochiz"
  document.cookie = "age=20"

  // 读取cookie
  var msg = document.cookie
  console.log(msg) // username=orochiz; age=20

  // 添加过期时间(单位:天)
  var d = new Date() // 当前时间 2019-9-25
  var days = 3    // 3天
  d.setDate(d.getDate() + days)
  document.cookie = "username=orochiz;"+"expires="+d

  // 删除cookie (给某个键值对设置过期的时间)
  d.setDate(d.getDate() - 1)
  console.log(document.cookie)
</script>

总结

相同点:都保存在浏览器端,可以下图位置查看储存的信息

不同点:

①传递方式不同

cookie数据始终在同源的http请求中携带(即使不需要),即cookie在浏览器和服务器间来回传递。

sessionStorage和localStorage不会自动把数据发给服务器,仅在本地保存。

②数据大小不同

cookie数据还有路径(path)的概念,可以限制cookie只属于某个路径下。
 存储大小限制也不同,cookie数据不能超过4k,同时因为每次http请求都会携带cookie,所以cookie只适合保存很小的数据,如会话标识。

sessionStorage和localStorage 虽然也有存储大小的限制,但比cookie大得多,可以达到5M或更大。

③数据有效期不同

sessionStorage:仅在当前浏览器窗口关闭前有效,自然也就不可能持久保持;

localStorage:始终有效,窗口或浏览器关闭也一直保存,因此用作持久数据;

cookie只在设置的cookie过期时间之前一直有效,即使窗口或浏览器关闭。

④作用域不同

sessionStorage不在不同的浏览器窗口中共享,即使是同一个页面;

localStorage 在所有同源窗口中都是共享的;

cookie也是在所有同源窗口中都是共享的。

Web Storage 支持事件通知机制,可以将数据更新的通知发送给监听者。

Web Storage 的 api 接口使用更方便。

到此这篇关于JavaScript本地储存:localStorage、sessionStorage、cookie的使用的文章就介绍到这了,更多相关JavaScript本地储存内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

时间: 2020-10-12

JS 中LocalStorage和SessionStorage的使用

最近因为项目上需要使用到客户端存储,所以稍微研究了一下,以下说说自己的理解和使用经验 1.调用方法相同 各自都包含以下几种操作: //根据key获取对应的值; window.sessionStorage.getItem(key); window.localStorage.getItem(key); //新增key-value,若key已存在,则更新value; window.sessionStorage.setItem(key,value); window.localStorage.setIte

JS中LocalStorage与SessionStorage五种循序渐进的使用方法

localStorage和sessionStorage一样都是用来存储客户端临时信息的对象. 他们均只能存储字符串类型的对象(虽然规范中可以存储其他原生类型的对象,但是目前为止没有浏览器对其进行实现). localStorage生命周期是永久,这意味着除非用户显示在浏览器提供的UI上清除localStorage信息,否则这些信息将永远存在. sessionStorage生命周期为当前窗口或标签页,一旦窗口或标签页被永久关闭了,那么所有通过sessionStorage存储的数据也就被清空了. 不同

JS localStorage存储对象,sessionStorage存储数组对象操作示例

本文实例讲述了JS localStorage存储对象,sessionStorage存储数组对象操作.分享给大家供大家参考,具体如下: 一.前言 最近在用angular做商城购物车的功能模块,因为angular的watch监听,数据只要发生变化就能很方便的自动渲染页面.但随即出现的问题是,之前用户操作的样式都会被重置掉. 例如我勾选了几个商品准备结算,又修改了商品数量,这时候发起了请求,页面数据被渲染,打钩的商品全被恢复未选中. 想着将所有选中商品的独有Id存入数组,利用localStorage存

js使用Array.prototype.sort()对数组对象排序的方法

本文实例讲述了js使用Array.prototype.sort()对数组对象排序的方法.分享给大家供大家参考.具体分析如下: 在讲对数组对象进行排序时,我们先来简单的了解一下Array.prototype.sort().sort方法接受一个参数--Function,function会提供两个参数,分别是两个进行比较的元素,如果元素是String类型则通过Unicode code进行比较,如果是Number类型则比较值的大小.如果比较的函数中返回1则两个元素交换位置,0和-1不交换位置.先看一个例

vue遍历对象中的数组取值示例

前几天小项目,没考虑周全,让后端改接口,改成数组中包含对象中包含数组的形式,后来越琢磨越不对,后台把所有数据放在了一个对象里,我拿弹窗数据不好拿,索性又改了回来,把后端折腾够呛,自己也折腾够呛,发上来,以示警戒 改前拿数据 <div class='your-container'> <div class="sortText"> <div>综合排序</div> <div class="sortHot" @click=

js将类数组对象转换成数组对象

在标准浏览器中,好像只要对象存在length属性,就能把它转换为数组,但IE就不尽然. //※※※※※※※※※※※测试1※※※※※※※※※※※※※※ function test(){ alert(arguments) arguments = Array.prototype.slice.call(arguments); alert(arguments instanceof Array); alert(arguments) } test(1,2,3,4); //※※※※※※※※※※※测试2※※※※※

JS实现数组简单去重及数组根据对象中的元素去重操作示例

本文实例讲述了JS实现数组简单去重及数组根据对象中的元素去重操作.分享给大家供大家参考,具体如下: js数组简单去重 var arr1 = [1, 2, 3, 4, 5, 6, 3, 4, 3]; function arrayUnique1(arr) { var result = [], hash = {}; for (var i = 0, elem; (elem = arr[i]) != null; i++) { if (!hash[elem]) { result.push(elem); ha

JS实现的合并多个数组去重算法示例

本文实例讲述了JS实现的合并多个数组去重算法.分享给大家供大家参考,具体如下: var arr1 = ['a','b']; var arr2 = ['a','c','d']; var arr3 = [1,'d',undefined,true,null]; //合并两个数组,去重 var concat_ = function(arr1,arr2){ //不要直接使用var arr = arr1,这样arr只是arr1的一个引用,两者的修改会互相影响 var arr = arr1.concat();

JS遍历JSON数组及获取JSON数组长度操作示例【测试可用】

本文实例讲述了JS遍历JSON数组及获取JSON数组长度操作.分享给大家供大家参考,具体如下: 遍历 JSON 数组: var questions = data.data.questionnaire.questions; //遍历 json 数组 for (var i in questions) { if (questions[i].type == '(单选)') { alert('danxuan'); } } 获取 JSON 数组长度: function getJsonLength(json)

Python实现动态给类和对象添加属性和方法操作示例

本文实例讲述了Python实现动态给类和对象添加属性和方法操作.分享给大家供大家参考,具体如下: 动态给类和对象添加属性 定义一个Person类 class Person(object): def __init__(self, name): self.name = name 给对象添加属性 # 创建2个Person,分别为p1,p2 p1 = Person('amy') print(p1.name) p1.age = 10 # 给p1对象添加属性 print(p1.age) # 输出10 p2

原生JS 实现的input输入时表格过滤操作示例

本文实例讲述了原生JS 实现的input输入时表格过滤操作.分享给大家供大家参考,具体如下: 需求:对input框进行键盘输入后根据输入的内容去匹配表格中指定的数据项,若存在相匹配的则只显示匹配的数据项: 细节处理:监听键盘输入后给一定的缓冲时间避免发生频繁的请求: 解决思路:给个定时器,当键盘开始输入时启动定时器,倘若在指定的时间内都不在进行输入操作,则执行匹配操作,否则取消操作,同时限定输入的字符串大于等于2位数字时再进行匹配操作,使过滤效果更精准一些. <!--JS --> var ti

PHP实现的多维数组去重操作示例

本文实例讲述了PHP实现的多维数组去重操作.分享给大家供大家参考,具体如下: 最近用到了一个获取历史会议列表的问题,需要去这个多维数组去重后返回返回给客户端,这里使用了几个php的组装函数,分享下,示例代码如下: <?php $str = '{ "status": 0, "result": [ { "hostName": "杨新", "pcode2": "41675441", &q

node.js使用zlib模块进行数据压缩和解压操作示例

本文实例讲述了node.js使用zlib模块进行数据压缩和解压操作.分享给大家供大家参考,具体如下: 我们可以使用 zlib 模块来对数据进行压缩和解压处理,减小数据体积,加快传输速度. 一.通过创建转换流,对文件进行压缩和解压 const fs = require('fs'); const zlib = require('zlib'); const path = require('path'); function gzip($src) { fs.stat($src, function (err