Ограничение хранения локального хранилища/манифеста

108
8

У меня есть следующий файл манифеста:

CACHE MANIFEST
#version 4

CACHE:
/assets/tick.png
/assets/logo.png
/assets/logo-white.png
/assets/belfast.jpg
/assets/dubai.jpeg
/assets/dublin.jpg
/assets/frankfurt.jpg
/assets/johannesburg.jpg
/assets/london.jpg
/assets/moscow.jpg
/assets/paris.jpg
/assets/milan.jpg
/assets/warsaw.jpg
/get-questions
/assets/sound.mp3
/assets/incorrect.mp3
/assets/correct.mp3
/assets/correctCity.mp3
/assets/public/fonts/Interstate-Bold.eot
/assets/public/fonts/Interstate-Bold.svg
/assets/public/fonts/Interstate-Bold.ttf
/assets/public/fonts/Interstate-Bold.woff
/assets/public/fonts/Interstate-Regular.eot
/assets/public/fonts/Interstate-Regular.ttf
/assets/public/fonts/Interstate-Regular.woff
/assets/public/fonts/InterstateLight.eot
/assets/public/fonts/InterstateLight.ttf
/assets/public/fonts/InterstateLight.woff

NETWORK:
*

и я использую localstorage следующим образом:

import React, { Component } from 'react';

class Incorrect extends Component {
goBack() {
let props = this.props,
candidate,
token = document.getElementsByTagName("meta")[0].getAttribute("content"),
fromStorage = localStorage.getItem("candidates");

props.setVisibility(true, false, false, false, false);
props.setFinalPlay(false, false);
props.setHeaderVisible(false);
props.resetPoints();
props.setBgColor("bg-white");
props.setBgImg();
props.setCorrectCitySoundOn(false);

candidate = props.candidate;

candidate.points = this.props.points;

if (fromStorage) {
var parsedFromStorage = JSON.parse(fromStorage)
parsedFromStorage.push(candidate)
localStorage.setItem("candidates", JSON.stringify(parsedFromStorage));
}
else {
localStorage.setItem("candidates", JSON.stringify([candidate]));
}
}

render() {
return(
<div className="h-v-center-align">
<div>
<h2>Incorrect</h2>
<p>{this.props.points} points go to your university</p>
<button onClick={this.goBack.bind(this)}>
play again
</button>
</div>

<div className="logo white"></div>
</div>
);
}
}

export default Incorrect;

это игра, в которой есть подключение к Интернету в начале, как только игра полностью загружена, интернет уходит, и игра воспроизводится (нет надежного соединения со стороны клиента, как в университетском городке).

Мы ожидаем 1500 записей в день, которые будут отображены в следующей форме:

import React, { Component } from 'react';

import axios from 'axios';
import serialize from 'form-serialize';

import DropDown from './dropDown.jsx';

import swearjar from 'swearjar';

let years = [2018, 2019, 2020, 2021],
subjects = [

],
universities = [

];

class Form extends Component {

constructor(props) {
super(props);

this.state = {
fullName: '',
fullNameInvalid: false,
email: '',
emailInvalid: false,
university: '',
universityInvalid: false,
subject: '',
subjectInvalid: false,
year: '',
yearInvalid: false,
terms: '',
termsInvalid: false,
showForm: false
}
}

updateStateProperty(el, val) {
var s = {};
s[el] = val;
this.setState(s);
}

updateNameOnKeyPress(e) {
this.setState({
fullName: e.target.value,
fullNameInvalid: false
})
}

updateEmailOnKeyPress(e) {
this.setState({
email: e.target.value
})

if(!this.validateEmail()){
this.updateStateProperty('emailInvalid', false);
}
}

updateUniversityOnKeyPress(e) {
this.setState({
university: e.target.value,
universityInvalid: false
})
}

updateSubjectOnKeyPress(e) {
this.setState({
subject: e.target.value,
subjectInvalid: false
})
}

updateYearOnKeyPress(e) {
this.setState({
year: e.target.value,
yearInvalid: false
})
}

updateTermsOnKeyPress = (e) => {
if(this.state.terms == ''){
this.setState({
terms: 'valid',
termsInvalid: false
})
}
else {
this.setState({
terms: ''
})
}
}

updateNameState = () => {
this.updateStateProperty('fullNameInvalid', true);
}

updateEmailState = () => {
this.updateStateProperty('emailInvalid', true);
}

updateUniversityState = () => {
this.updateStateProperty('universityInvalid', true);
}

updateSubjectState = () => {
this.updateStateProperty('subjectInvalid', true);
}

updateYearState = () => {
this.updateStateProperty('yearInvalid', true);
}

updateTermsState = () => {
this.updateStateProperty('termsInvalid', true);
}

validateEmail() {
let re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
return re.test(this.state.email);
}

validateForm() {
let state = this.state,
fullName = state.fullName == "",
email = this.validateEmail(),
university = state.university == "",
subject = state.subject == "",
year = state.year == "",
terms = state.terms == "";

if((fullName || swearjar.profane(state.fullName)) || !email || university || subject || year || terms) {
if(fullName || swearjar.profane(state.fullName)){
this.updateNameState()
}

if(!email){
this.updateEmailState()
}

if(university){
this.updateUniversityState();
}

if(subject){
this.updateSubjectState();
}

if(year){
this.updateYearState();
}

if(terms){
this.updateTermsState();
}
}

else {
return true;
}
}

submitForm(e) {
var form = document.getElementById('form');
e.preventDefault();

if(this.validateForm()) {
let candidate = serialize(form, { hash: true });
this.props.setVisibility(false, true, false, false, false);
this.props.setCandidate(candidate);
}
}

displayTerms() {
this.setState({
showForm: !this.state.showForm
})
}

render() {
let isVisible = this.props.visibility ? "" : "hide";

return(
<section className={"form-wrapper form " + isVisible}>
<form id="form">
<input
placeholder="Full Name"
type="text"
name="name"
className={"text-field " + (this.state.fullNameInvalid ? "error" : "")}
onChange={this.updateNameOnKeyPress.bind(this)} />

<input
placeholder="Email"
type="text"
name="email"
className={"text-field " + (this.state.emailInvalid ? "error" : "")}
onChange={this.updateEmailOnKeyPress.bind(this)} />

<div className="group">
<DropDown
isValid={this.state.universityInvalid}
list={universities}
validateValue={this.updateUniversityOnKeyPress.bind(this)}
firstValue="University" />

<DropDown
isValid={this.state.subjectInvalid}
list={subjects}
validateValue={this.updateSubjectOnKeyPress.bind(this)}
firstValue="Subject" />

<DropDown
isValid={this.state.yearInvalid}
list={years}
validateValue={this.updateYearOnKeyPress.bind(this)}
firstValue="Graduate Year" />

<div className="group__item">
<div>
<input
id="male"
name="gender"
type="radio"
value="m" />
<label htmlFor="male">Male</label>
</div>

<div>
<input
id="female"
name="gender"
type="radio"
value="f" />
<label htmlFor="female">Female</label>
</div>
</div>
</div>

</form>
</section>
);
}
}

export default Form;

Когда интернет вернется в конце дня:

данные, хранящиеся в localStorage, передаются следующим образом:

    $('.submit-data').on('click', function(e){
e.preventDefault();

if(JSON.parse(localStorage.getItem('candidates'))) {
var candidates = JSON.parse(localStorage.getItem('candidates'));

$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});

$.ajax({
url: '/save-data',
type: 'POST',
data: JSON.stringify(candidates),
dataType: 'json',
contentType: "application/json"
}).complete(function(){
$(".submit-data").hide();
$(".submit-wrapper").append("<p>Data has been submitted. Thank you.</p>");
localStorage.clear();
});
}
});

игра игралась в первый день, и данные шли так, как ожидалось. Однако в последующие дни данные не прошли. Может ли каким-то образом ограничение localstorage удалить данные, если они превышены? (Игра воспроизводится только на iPad)

спросил(а) 2017-10-17T12:42:00+03:00 2 года, 9 месяцев назад
0
Ваш ответ
Введите минимум 50 символов
Чтобы , пожалуйста,
Выберите тему жалобы:

Другая проблема