当前位置:首页 » 网页前端 » 前端能存数据吗
扩展阅读
webinf下怎么引入js 2023-08-31 21:54:13
堡垒机怎么打开web 2023-08-31 21:54:11

前端能存数据吗

发布时间: 2023-06-02 20:22:33

‘壹’ cookie前端存储有哪几种

1、cookie
HTTP cookie,通常直接叫做cookie,是客户端用来存储数据的一种选项,它既可以在客户端设置也可以在服务器端设置。cookie会跟随任意HTTP请求一起发送。
优点:兼容性好
缺点:一是增加了网络流量;二则是它的数据容量有限,最多只能存储4KB的数据,浏览器之间各有不同;三是不安全。
2、userData
userData是微软通过一个自定义行为引入的持久化用户数据的概念。用户数据允许每个文档最多128KB数据,每个域名最多1MB数据。
缺点:userData不是 web 标准的一部分,只有IE支持。
3、web存储机制
web storage,包括两种:sessionStorage 和 localStorage,前者严格用于一个浏览器会话中存储数据,因为数据在浏览器关闭后会立即删除;后者则用于跨会话持久化地存储数据。
缺点:IE不支持 SessionStorage,低版本IE ( IE6, IE7 ) 不支持 LocalStorage,并且不支持查询语言
4、indexedDB
indexed Database API,简称为indexedDB,是在浏览器中保存结构化数据的一种“数据库”。它类似SQL数据库的结构化数据存储机制,代替了废弃已久的web SQL Database API,它能够在客户端存储大量的结构化数据,并且使用索引高效检索的API。
缺点:兼容性不好,未得到大部分浏览器的支持。
5、Flash cookie
Flash本地存储,类似于HTTP cookie,它是利用 SharedObject类来实现本地存储信息。它默认允许每个站点存储不超过100K的数据,远大于cookie,而且能够跨浏览器。
缺点:浏览器需安装 Flash 控件,毕竟它是通过Flash的类来存储。所幸的是,没有安装Flash的用户极少。
6、Google Gears
Google Gears是Google在07年发布的一个开源浏览器插件,Gears 内置了一个基于SQLite的嵌入式 SQL数据库,并提供了统一API 对 数据库进行访问,在取得用户授权之后,每个站点可以在SQL数据库中存储“不限大小”的数据。
缺点:需要安装 Google Gears 组件

‘贰’ javascript能不能实现像数据库一样的存储功能,或者有没有除数据库以外的其他方法

如果只是在当前页面所需要的数据,存进变量里面就行
如果是需要传递的,可以存进js可操作的文件中(xml,json...)
用户信息的话cookies也可以
支持h5的话那就好说多了,他有对应存储模块

‘叁’ .net mvc前端存储值

前端存储值有两种。
本地存储sessionstorage,离线缓存application cache。
ViewData属性是ViewDataDictionary类型,在存储数据时使用Object类型,这种弱类型的存储与传递方式不方便,必须使用类型转换。

‘肆’ 说一下前端数据存储方式(cookies,localstorage,sessionstorage,indexedDB)的区别

Cookie最初是在客户端用于存储会话信息的,其要求服务器对任意HTTP请求发送Set-CookieHTTP头作为响应的一部分。cookie
以name为名称,以value为值,名和值在传送时都必须是URL编码的。浏览器会存储这样的会话信息,在这之后,通过为每个请求添加Cookie
HTTP头将信息发送回服务器。

localstorage

存储方式:

以键值对(Key-Value)的方式存储,永久存储,永不失效,除非手动删除。

sessionstorage

HTML5 的本地存储 API 中的 localStorage 与 sessionStorage 在使用方法上是相同的,区别在于 sessionStorage 在关闭页面后即被清空,而 localStorage 则会一直保存。

IndexedDB

索引数据库(IndexedDB) API(作为 HTML5 的一部分)对创建具有丰富本地存储数据的数据密集型的离线 HTML5 Web 应用程序很有用。同时它还有助于本地缓存数据,使传统在线 Web 应用程序(比如移动 Web 应用程序)能够更快地运行和响应。

‘伍’ web前端开发中的自定义属性怎么进行数据存放

HTML 5 增加了一项新功能是 自定义数据属性 ,也就是 data-* 自定义属性。在HTML5中我们可以使用以 data- 为前缀来设置我们需要的自定义属性,来进行一些数据的存放。当然高级浏览器下可通过脚本进行定义和数据存取。在项目实践中非常有用。
<div id = "user" data-uid = "12345" data-uname = "愚人码头" > </div>

使用attribute方法存取 data-* 自定义属性的值
使用attributes方法存取 data-* 自定义属性的值非常方便:

‘陆’ 前端数据存储方式有哪些

为你总结了四种数据存储方式,希望可以帮到你:

1、Cookie

cookie 用于存储web页面的用户信息。

cookie 是一些数据,存储在你电脑上的文本文件中。当web服务器向浏览器发送web页面时,在连接关闭后,服务端不会记录用户的信息。Cookie的作用就是用于解决如何记录客户端的用户信息。

2、localStorage

  • 允许在浏览器中存储key/value对的数据。

  • 用于长期保存整个网站的数据,保存的数据没有过期时间,直到手动去删除。

  • 属性是只读的。

  • 如果你想浏览器窗口关闭后还保留数据,可以使用localStorage;如果你只想将数据保存在当前会话中,可以使用sessionStorage.

3、sessionStorage

  • 允许在浏览器中存储key/value对的数据。

  • 数据对象临时保存同一窗口(或标签页)的数据,在关闭窗口或标签页之后也将删除这些数据。

4、indexedDB

索引数据库(indexDB)API(作为HTML5 的一部分)对创建具有吩咐本地存储数据的数据密集型的离线HTML5 Web 应用程序很有用。

同时它还有助于本地缓存数据,使传统再现Web应用程序(比如移动 Web 应用程序)能够更快的运行和响应。

想要了解或者学习更多前端知识,推荐北京尚学堂,雄厚的师资力量带给你高效的学习体验。

‘柒’ 前端缓存接口数据的实现

前端缓存 API 接口数据,前端怎么知道数据是否变了,该不该取缓存的数据呢。
可以采用 HTTP 协商缓存 ETag 来实现:
在后台每次修改需要缓存的数据时都进行一次 hash(当然也可以使用其他算法生成唯一标识)

将接口地址与 hash 值存为键值对

逻辑大概为: