客户端存储——Storage

kaka 发布于2019-08-22 15:01 / 674人阅读

摘要：方法为指定的键设置值获取指定键的值获取位置的键名根据指定的键删除键值对删除所有的简直对测试测试结果实例化对象定义存储某个特定会话的数据，这些数据值保持在浏览器运行期间。

方法

setItem(name, value):为指定的键设置值

getItem(name):获取指定键的值

key（index）：获取index位置的键名

removeItem(name):根据指定的键删除键值对

clear():删除所有的简直对

测试：

sessionStorage.setItem("book", "Professional JavaScript");

const sessionLength = sessionStorage.length;

for(let i=0;i
测试结果：

实例化对象

sessionStorage
   定义：sessionStorage存储某个特定会话的数据，这些数据值保持在浏览器运行期间。
   特点：
   1、sessionStorage中的数据可以跨越页面刷新而存在
   2、绑定于某个特定的服务器会话
   3、相当于一个页面的全局变量，可以用来记录某个页面的访问次数
globalStorage
   定义：拥有特定访问限制的跨越会话存储数据
   特点：
   1、globalStorage不算是storage的实例化对象，globalStorage["baidu.com"](指定哪个域名可以访问
   该数据)才算是storage的实例化对象，才能使用storage对象中的所有方法

localStorage
   定义：localStorage和globalStorage都是用于用户数据的长久存储，但是他没有规则的限制，规则早已制定好：只有来自同一域名，使用同一协议，在同一端口上的页面才可以访问localStorage中存储的数据，localStorage已经代替globalStorage来进行长久用户数据的存储

storage事件

触发时间
  只要对Storage对象进行修改，就会在document上触发这个事件，例如调用setItem，removeItem或者clear方法时都会触发这个事件
具体使用方法

    EventUtil.addHandler(document, "storage", (event) => {
        const change = `Storage changed for ${event.domain}-${event.key}-${event.oldValue}-${event.newValue}`;
        console.log(change);
    })
监听事件的返回对象参数有：

domain:发生变化的域名
key：发生修改的键
oldValue：修改前的值
newValue：修改后的值

注意：这个事件对localStorage和sessionStorage都有用，但是无法判断是哪一个
使用事例
function updateCounter(){
    document.getElementById("count1").innerHTML = sessionStorage.pageLoadCount;
    document.getElementById("count2").innerHTML = localStorage.pageLoadCount;  
}

function counter(){
    if(localStorage.getItem("pageLoadCount") === null){
        localStorage.setItem("pageLoadCount", 0);
    }

    if(sessionStorage.getItem("sessionCount") === null){
        sessionStorage.setItem("pageLoadCount", 0);
    }

    localStorage.pageLoadCount = parseInt(localStorage.getItem("pageLoadCount"))  + 1;
    sessionStorage.pageLoadCount = parseInt(localStorage.getItem("pageLoadCount")) + 1;

    updateCounter();
}

counter();
可以看到每刷新一次页面，pageLoadCount都会加1，但是当关掉这个页面的时候，sessionStorage中的pageLoadCount会还原成1，localStorage中的pageLoadCount还是原来的数

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/93092.html

JPower 2.0.4 发布，新增FASTDFS文件存储

摘要：的存储策略为了支持大容量，存储节点服务器采用了分卷或分组的组织方式。的文件下载客户端成功后，会拿到一个生成的文件名，接下来客户端根据这个文件名即可访问到该文件。一、FastDFS介绍FastDFS开源地址：https://github.com/happyfish100参考：分布式文件系统FastDFS设计原理参考：FastDFS分布式文件系统个人封装的FastDFS Java API：htt...

princekin 2021-09-03 10:30 评论0 收藏0
django中FastDFS客户端与自定义文件存储系统

摘要：客户端请求进行文件上传下载，通过调度最终由完成文件上传和下载。作用是文件存储，客户端上传的文件最终存储在服务器上，没有实现自己的文件系统而是利用操作系统的文件系统来管理文件。如果名为的文件在文件系统中存在，则返回，否则返回。什么是FastDFS FastDFS 是用 c 语言编写的一款开源的分布式文件系统。FastDFS 为互联网量身定制，充分考虑了冗余备份、负载均衡、线性扩容等机...

李增田 2019-07-30 18:37 评论0 收藏0
客户端数据存储 --- web storage From 《高程3》

摘要：的目的就是取代进行大量的本地数据存储，其中不能进行跨会话存储，这可以使用弥补。删除由指定的名值对儿。使用方法存储数据使用属性存储数据使用方法读取数据使用属性读取数据一般来说，对存储空间大小的限制都是以每个源协议域和端口为单位的。前言本文首先介绍web storage和Cookie的对比，解释web storage的优势；随后指出怎样使用插firebug插件的扩展firestorag...

wangbinke 2019-08-21 14:37 评论0 收藏0
客户端数据存储 --- web storage From 《高程3》

摘要：的目的就是取代进行大量的本地数据存储，其中不能进行跨会话存储，这可以使用弥补。删除由指定的名值对儿。使用方法存储数据使用属性存储数据使用方法读取数据使用属性读取数据一般来说，对存储空间大小的限制都是以每个源协议域和端口为单位的。前言本文首先介绍web storage和Cookie的对比，解释web storage的优势；随后指出怎样使用插firebug插件的扩展firestorag...

wfc_666 2019-08-01 15:50 评论0 收藏0